能跳轉(zhuǎn)以后，不可避免的就要涉及到傳值的問題油讯，下面也來記錄下正向傳值
首先，我們需要對Navigator的renderScene進(jìn)行設(shè)置
//渲染
renderScene(route, navigator) {
//導(dǎo)航條跳轉(zhuǎn)傳遞參數(shù) params 為傳遞的參數(shù) 其他頁面?zhèn)髦禃r的名字要和這里設(shè)置的一樣
return <route.component {...route.params} navigator={navigator}/>
//沒有參數(shù)
// return <route.component navigator={navigator} />
}
然后沈跨，在頁面跳轉(zhuǎn)的方法里面這樣寫
//params對應(yīng)的就是我們要傳的值饿凛，這里我傳了兩個值
goPage2() {
this.props.navigator.push({
component:SecondPageComponent,
params:{//params 要和HomePage.js里面的 renderScene(route, navigator)里面設(shè)置的參數(shù)名一樣
param1:'第一個參數(shù)',
param2:'第二個參數(shù)',
}
})
}
再然后软驰，我們需要在第二個頁面接收這兩個值，所以我們要聲明兩個屬性進(jìn)行接收
constructor(props){
super(props);
//這兩個屬性就是我們要接收第一頁傳過來的兩個值
this.state = {
paramGet1:PropTypes.string,
paramGet2:PropTypes.string,
};
}
再再然后杀狡，屬性已經(jīng)聲明了贰镣，下面就是接收值了
//這個方法就是聲明周期的其中一個了，render（）運(yùn)行后恭陡，就會調(diào)用這個方法上煤，我們在這里接收傳過來的兩個值
componentDidMount() {
//這里獲取從FirstPageComponent傳遞過來的參數(shù)
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'}}>參數(shù)1：{this.state.paramGet1}</Text>
<Text style={{backgroundColor:'red'}}>參數(shù)2：{this.state.paramGet2}</Text>
</View>
)
}
OK,這樣就可以正向傳值了
navgif.gif
