Question

一个简单的问题，你写得很好ReactNative。

使用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中的路由对象中传递简单数据，如代码所示。

如何在场景之间传递更复杂的对象？ Native React的正确方法是什么？任何一个例子？

谢谢你们！

Answer 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组件将props传递给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>
    )
  };

最后，Item1组件带有props，并保存状态。

 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> 
        );
  }

如果你有任何吸烟......这是一个好地方。

由于

这是在react-native中将参数从一个场景传递到另一个场景的最佳方法

1 个答案: