2016-02-06 1 views
1

Простой вопрос, для которого вы хорошо пишете ReactNative.Wich является наилучшим подходом для передачи параметров из одной сцены в другую сцену в реакции-родной

Каков наилучший способ передачи параметров из одной сцены в другую сцену с помощью ListView, где есть детали элемента.

_renderRow (rowData, sectionID, rowID, highlightRow) { 
    return (
     <View> 
       <TouchableHighlight 
        onPress={() => this.props.navigator.push({name: 'Item1', data: rowData.name, rowID: rowID})}> 
        <Text>{rowID}.- {rowData.name}</Text> 
      </TouchableHighlight> 
     </View> 
    ) 
    }; 

Просто я знаю, что вы можете передать простые данные в объекте маршрута в navigator.push, как показано в коде.

Как передать более сложные объекты между сценами? Что было бы правильным способом родной реакции? любой пример?

Спасибо, ребята!

+0

Рассмотрим с использованием флюса схеме: https://facebook.github.io/flux/docs/overview.html, и на SO: http://stackoverflow.com/questions/tagged/reactjs-flux – Cherniv

ответ

1

Я думаю, что нашел ответ. Использование «passProps» может передавать данные, но я должен помнить, что в определении rederScene должны описать те же параметры

Навигатор определения реквизита в пути ITEM1

<Navigator ref='navigator' 
    initialRoute={{name: 'Home'}} 
    renderScene={(route, navigator) => 
    switch (route.name) { 
    case 'Home': return (
     <Home navigator={navigator}/> 
    ); 
    case 'Item1': return (
     <Item1 navigator={navigator} rowID={route.rowID||-1} passProps={route.passProps||{}}/> 
    );  
    }}/> 

элемент управления ListView компонент проходит реквизит навигатор в renderRow

_renderRow (rowData, sectionID, rowID, highlightRow) { 
    return (
     <View> 
       <TouchableHighlight 
        onPress={() => this.props.navigator.push({name: 'Item1', rowID: rowID, passProps: rowData})}> 
        <Text>{rowID}.- {rowData.name}</Text> 
      </TouchableHighlight> 
     </View> 
    ) 
    }; 

и, наконец, компонент Элемент1 с реквизитом, и сохранение в состоянии.

componentDidMount() { 
    this.setState({ 
     data: this.props.passProps 
    }); 
    }; 

    render() { 
    console.log(this.props); 
     return (
      <View> 
      <Text>{this.props.rowID}</Text> 
      <Text>{this.state.data.name}</Text> 
      <SimpleButton 
        onPress={() => this.props.navigator.pop()} 
        customText='Back' /> 
      </View> 
     ); 
    } 

Если у вас есть какие-либо санкции ... это хорошее место.

Благодаря