能跳轉(zhuǎn)以后，不可避免的就要涉及到傳值的問(wèn)題，下面也來(lái)記錄下正向傳值

首先，我們需要對(duì)Navigator的renderScene進(jìn)行設(shè)置

//渲染
    renderScene(route, navigator) {
        //導(dǎo)航條跳轉(zhuǎn)傳遞參數(shù)   params 為傳遞的參數(shù) 其他頁(yè)面?zhèn)髦禃r(shí)的名字要和這里設(shè)置的一樣
        return <route.component {...route.params} navigator={navigator}/>

        //沒(méi)有參數(shù)
        // return <route.component navigator={navigator} />
    }

然后，在頁(yè)面跳轉(zhuǎn)的方法里面這樣寫

//params對(duì)應(yīng)的就是我們要傳的值，這里我傳了兩個(gè)值
goPage2() {
        this.props.navigator.push({
            component:SecondPageComponent,
            params:{//params 要和HomePage.js里面的 renderScene(route, navigator)里面設(shè)置的參數(shù)名一樣
                param1:'第一個(gè)參數(shù)',
                param2:'第二個(gè)參數(shù)',
            }
        })
    }

再然后，我們需要在第二個(gè)頁(yè)面接收這兩個(gè)值，所以我們要聲明兩個(gè)屬性進(jìn)行接收

constructor(props){
        super(props);
//這兩個(gè)屬性就是我們要接收第一頁(yè)傳過(guò)來(lái)的兩個(gè)值
        this.state = {
            paramGet1:PropTypes.string,
            paramGet2:PropTypes.string,
        };
    }

再再然后，屬性已經(jīng)聲明了，下面就是接收值了

//這個(gè)方法就是聲明周期的其中一個(gè)了，render（）運(yùn)行后，就會(huì)調(diào)用這個(gè)方法，我們?cè)谶@里接收傳過(guò)來(lái)的兩個(gè)值
 componentDidMount() {
        //這里獲取從FirstPageComponent傳遞過(guò)來(lái)的參數(shù)
        this.setState({
            paramGet1: this.props.param1,
            paramGet2: this.props.param2,

        });

    }

接收過(guò)來(lái)的值顯示到頁(yè)面上

render() {
        return (
            <View style={firstPageStyle.viewStyleBase}>
                <TouchableOpacity onPress={() => this.backPage1()}>
                        <Text style={firstPageStyle.textStyleBase}>第二頁(yè)</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

項(xiàng)目地址：https://github.com/chjwrr/RN-NatigatorTest