如何在React Native中的堆栈导航器和抽屉导航器之间传递数据

Question

这是我应用程序的导航器部分。

const drawerNavigator = createDrawerNavigator(
  {
  Home: { screen: Stack},
    History: { screen: History},
    Transactions: { screen: Transactions},
  Profile:{screen:EditProfile},
  Wallet:{screen:Wallet},
  ResetPassword:{screen:ResetPassword},
  },
  {
    contentComponent: props => <Drawer {...props} />
  },
  {
        contentOptions: {
              activeTintColor: '#e91e63',
            }
  }
);

const RootStack = createStackNavigator({
  Splash: { screen: Splash },
  Login: { screen: Login},
  Register: { screen: Register},
  ForgotPassword: { screen: ForgotPassword},
  CreateProfile: { screen: CreateProfile},
  UploadDocuments: { screen: UploadDocuments},
  Home: {screen: drawerNavigator},

}, {
     headerMode: 'none',
     initialRouteName: 'Splash'
})

当前在堆栈导航器中（如果成功注册）时，我将其发送到主屏幕。这样。

this.props.navigation.navigate("Home",{result,result})

结果数据包含其中的名称和年龄。但是在抽屉中，我无法收到数据为什么？我在这里使用React Navigation 3。我的抽屉代码是。

componentDidMount(){
    var result =this.props.navigation.getParam('result');
    this.setState({name:result['name'],profession:result['profession']})
}


render() {
      return (
                <View style={{flex:1}}>

                <View style={{height:'36%', backgroundColor:'#8D6CFD', justifyContent:'center',marginBottom:10,paddingBottom:-20}}>
                    <StarRating
                    containerStyle={{marginRight:20,width:'40%',alignSelf:'flex-end',marginTop:-20,marginBottom:10}}
                    disabled={false}
                    emptyStar={'ios-star-outline'}
                    fullStar={'ios-star'}
                    fullStarColor='#F0E68C'
                    emptyStarColor='black'
                    halfStarColor='#F0E68C'
                    halfStar={'ios-star-half'}
                    iconSet={'Ionicons'}
                    starSize={25}
                    maxStars={5}
                    rating={this.state.starCount}
                    selectedStar={(rating) => this.onStarRatingPress(rating)}
                    />
                    <View style ={{flexDirection:'row',marginLeft:20,alignItems:'center'}}>
                    <Image source={require('../assets/doctor/doctor1.jpg')}  style={{height:70, width:70,borderRadius:70/2}} />
                            <View style={{marginLeft:10}}>
                                    <Text style={{fontWeight:'bold'}}>{this.state.name}</Text>
                                    <Text style={{fontWeight:'bold'}}>{this.state.age}</Text>
                            </View>
                    </View>
                </View>




                    <TouchableOpacity onPress={() => this.props.navigation.navigate("History")}>
                                <View style={styles.drawerlayout}>
                                 <Image source={require('../assets/nav/history.png')} style={styles.drawerimage} />
                     <Text style={styles.drawertext}>History</Text>
                                </View>
                                </TouchableOpacity>


                    <TouchableOpacity onPress={() => this.props.navigation.navigate("Transactions")}>
                                <View style={styles.drawerlayout}>
                                 <Image source={require('../assets/nav/notification.png')} style={styles.drawerimage} />
                     <Text style={styles.drawertext}>Transactions</Text>
                                </View>
                                </TouchableOpacity>



                    <TouchableOpacity onPress={() => {
                            AsyncStorage.removeItem('uname', (err) => {
                            ToastAndroid.show("Successfully logged out", ToastAndroid.LONG);
                            this.props.navigation.navigate("Login")
                            });
                    }}>
                                <View style={styles.drawerlayout}>
                                 <Image source={require('../assets/nav/logout.png')} style={styles.drawerimage} />
                     <Text style={styles.drawertext}>Logout</Text>
                                </View>
                                </TouchableOpacity>

                                </View>
  );

 }

上面的代码给我错误，结果['name']未定义。

Answer 1

在构造函数中定义初始状态为我工作

constructor(props) {
        super(props);
        this.setState({name:'',profession:''})
    }

然后在componentdidmount do

中

var result =this.props.navigation.getParam('result');
    this.setState({name:result['name'],profession:result['profession']})