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

，结果数据中包含名称和年龄。但是在抽屉里我为什么不能接收数据？我在这里使用反应导航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做

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

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

1 个答案: