Question

我正在尝试在 react-native 平台上创建混合应用程序。我们在这里有两页。第一页是选项卡式页面，另一页是详细页面。当您单击标题部分中的后退箭头时，我想将一些数据从第二页传递到父页面（即导航发生时）），并希望在第一页中显示它。

我已经成功地将数据从父页面传递到子页面，并且该数据正在第二页面中使用。但是反之亦然。

这是我尝试过的。

父页面

class Menu extends Component {   

   refresh=(data)=> {
      alert(data);   } }

   render() {
     return (
       <View>

         <TouchableOpacity onPress={() => {this.props.navigation.navigate('ProductDetail',{
            onGoBack: this.refresh,
          }); 
         }}> 
       </View>);
  }

在子页面中

static navigationOptions= ({ navigation }) => {
    //const {state} = navigation;
    return {

        headerTitle: (
            <View>
                <Image source={require('../images/assets/menuscreenlogo.png')}/>
            </View>
        ),
        headerLeft: (
            <TouchableOpacity onPress={() => {this.props.navigation.state.params.onGoBack('123');
            this.props.navigation.goBack();}} >

                <Image source={require('../images/assets/dinnerscreen-backarrow.png')}  />
            </TouchableOpacity>
        ),
        headerRight: (
            <TouchableOpacity>
                <Image  source={require('../images/assets/dinnerscreen-basket.png')} />
            </TouchableOpacity>
        ),
      };
};

有人可以帮我做同样的事情吗？

Answer 1

无需在子页面中使用this.props.navigation，因为您已经在其中获得了navigation对象，因此应该是

<TouchableOpacity onPress={() => {navigation.state.params.onGoBack('123');
        navigation.goBack();}} >

将数据以及导航传递到React-Native

1 个答案: