React-Native(Navigator)

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)