例子:男孩向女孩送玫瑰花, 女孩回贈(zèng)一盒巧克力
1.在index.ios.js 或者 index.android.js中創(chuàng)建導(dǎo)航
export default class imooc_gp extends Component {
render() {
return (
<View style={styles.container}>
{/*Navigator*/}
<Navigator
//初始化路由,告訴導(dǎo)航,我的第一個(gè)界面是Boy組件
initialRoute={{
component:Boy
}}
//渲染場(chǎng)景
renderScene = {(route,navigator)=>{
let Component = route.component;
//返回組件 {...route.params} 組件的延展屬性
return <Component navigator={navigator} {...route.params}/>
}}
>
</Navigator>
</View>
);
}
}
2.在Boy組件中
//導(dǎo)出組件
export default class Boy extends Component{
//構(gòu)造函數(shù)
constructor(props){
super(props);
//該'word'字段是用于記錄女孩回贈(zèng)的巧克力,初始值為空
this.state={
word:''
}
}
render(){
return(
<View style={styles.container}>
<Text style={styles.textStyle}>I am boy</Text>
//當(dāng)'送女孩一直玫瑰??'文字被點(diǎn)擊時(shí),跳轉(zhuǎn)到女孩界面
<Text style={styles.textStyle} onPress={()=>{
this.props.navigator.push({
component:Girl, //女孩組件
//需要傳遞的參數(shù)
params:{
word:'一束玫瑰????????????',
//回調(diào)函數(shù),onCallBack:(word) 'word'指的是從女孩組件中傳過(guò)來(lái)的巧克力
onCallBack:(word)=>{
//更新?tīng)顟B(tài)機(jī)
this.setState({
word:word
});
}
}
});
}}>送女孩一只玫瑰??</Text>
//顯示女孩送的巧克力
<Text style={styles.textStyle}>{this.state.word}</Text>
</View>
);
}
}
3.Girl組件中
export default class Girl extends Component{
render(){
return(
<View style={styles.container}>
<Text style={styles.text}>I am girl</Text>
//顯示男孩送的玫瑰花
<Text style={styles.text}>我收到了男孩送的:{this.props.word}</Text>
<Text style={styles.text} onPress={()=>{
//女孩回贈(zèng)一盒巧克力,調(diào)用男孩組件的回調(diào)函數(shù)
this.props.onCallBack('一盒巧克力');
//返回
this.props.navigator.pop();
}}>回贈(zèng)巧克力</Text>
</View>
);
}
}
navigator正反向傳值
