React-Native-Navigator导航条-正向传值（二）

能跳转以后，不可避免的就要涉及到传值的问题，下面也来记录下正向传值

首先，我们需要对Navigator的renderScene进行设置

//渲染
    renderScene(route, navigator) {
        //导航条跳转传递参数   params 为传递的参数 其他页面传值时的名字要和这里设置的一样
        return 

        //没有参数
        // return 
    }

然后，在页面跳转的方法里面这样写

//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 (
            
                 this.backPage1()}>
                        第二页

                

                参数1：{this.state.paramGet1}
                参数2：{this.state.paramGet2}
            
        )

    }

OK,这样就可以正向传值了

navgif.gif

项目地址：https://github.com/chjwrr/RN-NatigatorTest