Navigator簡單使用
這是一個簡單的例子，用Navigator來跳轉頁面纵潦，頁面之間傳遞參數(shù) (代碼是ES6語法寫的):
class RN_1 extends Component {
render(){
return(
<Navigator
initialRoute={{name:'kk', component:List}}
configureScene={(route)=>{
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
//渲染場景
renderScene={(route, navigator)=>{
//便利route所有參數(shù)
return<route.component {...route.params} navigator={navigator} />
}}
/>
);
}}
上述代碼解釋：
initialRoute={{name:'kk', component:List}}
- 初始化路由：name就是二級頁面的title泪掀，component是import二級頁面
eg：import Like from './Like';
configureScene={(route)=>{ return Navigator.SceneConfigs.VerticalDownSwipeJump; }}
- 配置場景（
設置push方式）
還有一種push方式：VerticalUpSwipeJump
renderScene={(route, navigator)=>{ return<route.component {...route.params} navigator={navigator} /> }}
- 遍歷route所有參數(shù)
針對于route中所有的參數(shù)遍歷听绳，傳值入List.js
下面是官方給出的API方法。
1. getCurrentRoutes() - 獲取當前棧里的路由异赫，也就是push進來椅挣，沒有pop掉的那些。
2. jumpBack() - 跳回之前的路由塔拳，當然前提是保留現(xiàn)在的鼠证，還可以再跳回來，會給你保留原樣靠抑。
3. jumpForward() - 上一個方法不是調到之前的路由了么量九，用這個跳回來就好了。
4. jumpTo(route) - 跳轉到已有的場景并且不卸載孕荠。
5. push(route) - 跳轉到新的場景娩鹉，并且將場景入棧，你可以稍后跳轉過去
6. pop() - 跳轉回去并且卸載掉當前場景
7. replace(route) - 用一個新的路由替換掉當前場景
8. replaceAtIndex(route, index) - 替換掉指定序列的路由場景
9. replacePrevious(route) - 替換掉之前的場景
10. resetTo(route) - 跳轉到新的場景稚伍，并且重置整個路由棧
11. immediatelyResetRouteStack(routeStack) - 用新的路由數(shù)組來重置路由棧
12. popToRoute(route) - pop到路由指定的場景弯予，在整個路由棧中，處于指定場景之后的場景將會被卸載个曙。
13. popToTop() - pop到棧中的第一個場景锈嫩，卸載掉所有的其他場景。
附注Code
/** * Sample React Native App * https://github.com/facebook/react-native */'use strict';import React, {Component} from 'react';import { AppRegistry, StyleSheet, Navigator, Text, View} from 'react-native';import Like from './Like';import Swiper_Test from './Swiper_Test';class RN_1 extends Component { render(){ return( <Navigator //初始化路由 initialRoute={{name:'kk', component:List}} //配置場景（設置push方式） configureScene={(route)=>{ return Navigator.SceneConfigs.VerticalUpSwipeJump; }} //渲染場景 renderScene={(route, navigator)=>{ //便利route所有參數(shù) return<route.component {...route.params} navigator={navigator} /> }} /> ); }}class List extends Component { constructor(props){ super(props); this.state={ id:null, } } push(){ const {navigator} = this.props; if (navigator){ navigator.push({ name:'haha', component:Swiper_Test, //往二級界面?zhèn)鲄ⅲㄐ枰诔跏蓟x） params:{ id:this.props.id } }); } } render(){ return( <View style={{flex:1, alignItems:'center', marginTop:25}}> <Text style={{fontSize:25, color:'red'}} onPress={this.push.bind(this)}>PUSH</Text> </View> ); }}const styles = StyleSheet.create({ flex:{ flex:1, marginTop:20, }, list_item:{ height:40, marginLeft:10, marginRight:10, fontSize:20, borderBottomWidth:1, borderBottomColor:'#ddd', justifyContent:'center', }, center:{ }, wrapper: { }, slide1: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#9DD6EB', }, slide2: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#97CAE5', }, slide3: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#92BBD9', }, text: { color: '#fff', fontSize: 30, fontWeight: 'bold', }});AppRegistry.registerComponent('RN_1', ()=> RN_1);```
最后附上reacrnative中文網(wǎng)鏈接地址：[Navigator](http://reactnative.cn/docs/0.38/navigator.html#content)