能跳转以后，不可避免的就要涉及到传值的问题，下面也来记录下正向传值
首先，我们需要对Navigator的renderScene进行设置
//渲染
renderScene(route, navigator) {
//导航条跳转传递参数 params 为传递的参数 其他页面传值时的名字要和这里设置的一样
return <route.component {...route.params} navigator={navigator}/>
//没有参数
// return <route.component navigator={navigator} />
}
然后，在页面跳转的方法里面这样写
//params对应的就是我们要传的值，这里我传了两个值
goPage2() {
this.props.navigator.push({
component:SecondPageComponent,
params:{//params 要和HomePage.js里面的 renderScene(route, navigator)里面设置的参数名一样
param1:'第一个参数',
param2:'第二个参数',
}
})
}
再然后，我们需要在第二个页面接收这两个值，所以我们要声明两个属性进行接收
constructor(props){
super(props);
//这两个属性就是我们要接收第一页传过来的两个值
this.state = {
paramGet1:PropTypes.string,
paramGet2:PropTypes.string,
};
}
再再然后，属性已经声明了，下面就是接收值了
//这个方法就是声明周期的其中一个了，render（）运行后，就会调用这个方法，我们在这里接收传过来的两个值
componentDidMount() {
//这里获取从FirstPageComponent传递过来的参数
this.setState({
paramGet1: this.props.param1,
paramGet2: this.props.param2,
});
}
接收过来的值显示到页面上
render() {
return (
<View style={firstPageStyle.viewStyleBase}>
<TouchableOpacity onPress={() => this.backPage1()}>
<Text style={firstPageStyle.textStyleBase}>第二页</Text>
</TouchableOpacity>
<Text style={{backgroundColor:'red'}}>参数1：{this.state.paramGet1}</Text>
<Text style={{backgroundColor:'red'}}>参数2：{this.state.paramGet2}</Text>
</View>
)
}
OK,这样就可以正向传值了
navgif.gif
