时间戳

首页 > 解决方案 > 在 React-Native 中将数据与导航一起传递到父屏幕

react-native - 在 React-Native 中将数据与导航一起传递到父屏幕

问题描述

我正在尝试在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>
        ),
      };
};

谁能帮我做同样的事情？

标签： react-nativereact-navigation

解决方案

无需this.props.navigation在子页面中使用，因为您已经在navigation那里获得了对象，所以它应该是

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

推荐阅读