navigator 的传值

例子:男孩向女孩送玫瑰花, 女孩回赠一盒巧克力

1.在index.ios.js 或者 index.android.js中创建导航

export default class imooc_gp extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/*Navigator*/}
        <Navigator
            //初始化路由,告诉导航,我的第一个界面是Boy组件
            initialRoute={{
              component:Boy
            }}
            //渲染场景
            renderScene = {(route,navigator)=>{
              let Component = route.component;
              //返回组件  {...route.params} 组件的延展属性
              return <Component navigator={navigator} {...route.params}/>
            }}
        >
        </Navigator>
        
      </View>
    );
  }
}

2.在Boy组件中

//导出组件
export default class Boy extends Component{
    //构造函数
    constructor(props){
        super(props);
      //该'word'字段是用于记录女孩回赠的巧克力,初始值为空
        this.state={
            word:''
        }
    }
    render(){
        return(
            <View style={styles.container}>
                <Text style={styles.textStyle}>I am boy</Text>
                //当'送女孩一直玫瑰🌹'文字被点击时,跳转到女孩界面
                <Text style={styles.textStyle} onPress={()=>{
                    this.props.navigator.push({
                        component:Girl, //女孩组件
                        //需要传递的参数
                        params:{
                            word:'一束玫瑰🌹🌹🌹🌹🌹🌹',
                            //回调函数,onCallBack:(word) 'word'指的是从女孩组件中传过来的巧克力
                            onCallBack:(word)=>{
                                //更新状态机
                                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={()=>{
                    //女孩回赠一盒巧克力,调用男孩组件的回调函数
                    this.props.onCallBack('一盒巧克力');
                    //返回
                    this.props.navigator.pop();
                }}>回赠巧克力</Text>
            </View>
        );
    }

}

navigator正反向传值