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了!!!