React Native之Navigator使用,參數的順傳和逆

render() {
        return (
            <Navigator
                initialRoute={{
                    component:FirstView,
                    params:{
                      title:'第一个视图',
                        haha:'哈哈',
                        hehe:'呵呵',
                        heihei:'嘿嘿'
                    }

                }}
                renderScene={(route, navigator) =>
                    <route.component {...route.params} nav={navigator}  />}
                configureScene={()=>//跳轉動畫
                    Navigator.SceneConfigs.FloatFromBottom
                }
            />
        );
    }

可以簡單地理解為RN中的Navigator就是route!!!

兩個最基本屬性分別為:

1,initialRoute

• 第一個屬性中定義變量component為下一個需要跳轉的控制器
• 參數params為傳遞給FirstView的

2,renderScene

• 這個是渲染用的,即進來這裡就開始創建下一個需要跳轉的介面,並傳遞參數給下個介面使用
• route.component 不能寫成firstView,因為當FirstView跳轉到SecondView時,也會進來這個方法,如果寫成FirstView的話,將一直跳轉到FirstView!

下面為FirstView中的代碼

render() {
        return (
           <View style={styles.container}>
               {/*导航条*/}
               <View style={styles.navStyle}>
                   {/*导航条中间的文字*/}//後面的名字是驗證參數回傳的!!!
                   <Text>{this.props.title+'名字是'+this.state.userName}</Text>
               </View>
//-----
               <TouchableOpacity
                onPress={()=>this.viewClick()}
               >
                    <Text>{this.props.title}</Text>//通過props拿到傳遞來的title

               </TouchableOpacity>
           </View>
        );
    }

FirstView的文字點擊方法

viewClick(){
        //props 属性!!! 这个属性是你这个对象创建的时候定义的!!!
        this.props.nav.push({
            component:SecondView,
            params:{
               title:'这是第二个界面',
                //从第二个页面获取userName
                getUserName:function (user) {
                    this.setState({
                        userName:user
                    })
                }.bind(this)
            }
        })
    }

其中的getUserName

• 是一個回調函數,即可以實現Navigator的參數回傳功能
• 必須加上.bind(this),因為下一個頁面必須使用FirstView這個this才能改變FirstView這個狀態機,所以此時必須把自己傳遞出去

//---

    viewClick(){
        //为了严谨起见!!先判断
        if(this.props.getUserName){
            this.props.getUserName('我是逆傳過來的值!!')
        }

        //props 属性!!! 这个属性是你这个对象创建的时候定义的!!!
        this.props.nav.pop();
    }

在SecondView的點擊事件將要POP返回到FirstView時先調用回調函數就可以回傳值給FirstView了!!!