Question

我有简单的导航

 if (routeId === 'Page1') {
  return (
    <Page1
        navigator={navigator} />
  );
}
if (routeId === 'Page2') {
  return (
    <Page2 
      navigator={navigator} />

  );
}

然后在第一页的列表中，我将函数绑定到每一行，以及要传递的对象。（c）中

   render(){
     this.state.listData.map((c, i) => {
        return <TouchableOpacity onPress={this.visitPage.bind(this, c)} key={ i } style={ styles.cContainer }>
        <Image source={{uri:c.avatar}} style={ styles.circular }>
        </Image>
        <Text style={styles.text}>{c.name}</Text>
        </TouchableOpacity>
   }
  }

现在我怎样才能让这个对象转到第2页？在visitPage我有......

visitPage(){
  this.props.navigator.push({
    id:'Page2',
    name:'Page2',
    passProps:{data:this} //iOS only uses passProps??  
  });
}

我也试过

visitPage(){
  this.props.navigator.push({
    id:'Page2',
    name:'Page2',
    data:this
  });
}

然后在构造函数的第2页上，我将数据设置为null，并在页面mount上读取属性。

  constructor(props, context) {
    super(props, context);
     console.log(this.props);// Returns my navigator object, but no properties along with it.
    this.state = {
       page2Data: this.props.data,
    };
  }

  onComponentWillMount(){
     console.log(this.props.data); // Returns undefined 
     this.setState({page2Data: this.props.data});
  }

Answer 1

如果要使用passProps，则需要将属性附加到组件，如下所示：

if (routeId === 'Page1') {
  return (
    <Page1 {...route.passProps} navigator={navigator} />
  );
}
if (routeId === 'Page2') {
  return (
    <Page2 {...route.passProps} navigator={navigator}  />

  );
}

然后你可以这样做：

this.props.navigator.push({
    id: 1,
    passProps: {
        name: 'Chris',
        location: 'some location'
    }
})

传递动态道具React-native

1 个答案: