Navigator简单使用
这是一个简单的例子，用Navigator来跳转页面，页面之间传递参数 (代码是ES6语法写的):
class RN_1 extends Component {
render(){
return(
<Navigator
initialRoute={{name:'kk', component:List}}
configureScene={(route)=>{
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
//渲染场景
renderScene={(route, navigator)=>{
//便利route所有参数
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所有参数
针对于route中所有的参数遍历，传值入List.js
下面是官方给出的API方法。
1. getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
2. jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
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) - 用新的路由数组来重置路由栈
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所有参数 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, //往二级界面传参（需要在初始化定义） 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中文网链接地址：[Navigator](http://reactnative.cn/docs/0.38/navigator.html#content)