Navigator簡(jiǎn)單使用

這是一個(gè)簡(jiǎn)單的例子，用Navigator來跳轉(zhuǎn)頁面，頁面之間傳遞參數(shù) (代碼是ES6語法寫的):

class RN_1 extends Component {   
 render(){      
  return(         
   <Navigator       
     initialRoute={{name:'kk', component:List}}            
        configureScene={(route)=>{          
          return Navigator.SceneConfigs.VerticalDownSwipeJump;              
  }}            
    //渲染場(chǎng)景   
             renderScene={(route, navigator)=>{  
                  //便利route所有參數(shù)    
                return<route.component {...route.params} navigator={navigator} />     
           }}  
          />   
     );   
 }}

上述代碼解釋：
initialRoute={{name:'kk', component:List}}

• 初始化路由：name就是二級(jí)頁面的title，component是import二級(jí)頁面
  eg：import Like from './Like';

configureScene={(route)=>{ return Navigator.SceneConfigs.VerticalDownSwipeJump; }}

• 配置場(chǎng)景（設(shè)置push方式）
  還有一種push方式：VerticalUpSwipeJump

renderScene={(route, navigator)=>{   return<route.component {...route.params} navigator={navigator} /> }}

• 遍歷route所有參數(shù)
  針對(duì)于route中所有的參數(shù)遍歷，傳值入List.js

下面是官方給出的API方法。
1. getCurrentRoutes() - 獲取當(dāng)前棧里的路由，也就是push進(jìn)來，沒有pop掉的那些。
2. jumpBack() - 跳回之前的路由，當(dāng)然前提是保留現(xiàn)在的，還可以再跳回來，會(huì)給你保留原樣。
3. jumpForward() - 上一個(gè)方法不是調(diào)到之前的路由了么，用這個(gè)跳回來就好了。
4. jumpTo(route) - 跳轉(zhuǎn)到已有的場(chǎng)景并且不卸載。
5. push(route) - 跳轉(zhuǎn)到新的場(chǎng)景，并且將場(chǎng)景入棧，你可以稍后跳轉(zhuǎn)過去
6. pop() - 跳轉(zhuǎn)回去并且卸載掉當(dāng)前場(chǎng)景
7. replace(route) - 用一個(gè)新的路由替換掉當(dāng)前場(chǎng)景
8. replaceAtIndex(route, index) - 替換掉指定序列的路由場(chǎng)景
9. replacePrevious(route) - 替換掉之前的場(chǎng)景
10. resetTo(route) - 跳轉(zhuǎn)到新的場(chǎng)景，并且重置整個(gè)路由棧
11. immediatelyResetRouteStack(routeStack) - 用新的路由數(shù)組來重置路由棧
12. popToRoute(route) - pop到路由指定的場(chǎng)景，在整個(gè)路由棧中，處于指定場(chǎng)景之后的場(chǎng)景將會(huì)被卸載。
13. popToTop() - pop到棧中的第一個(gè)場(chǎng)景，卸載掉所有的其他場(chǎng)景。

附注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}}                //配置場(chǎng)景（設(shè)置push方式）                configureScene={(route)=>{                    return Navigator.SceneConfigs.VerticalUpSwipeJump;                }}                //渲染場(chǎng)景                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,                //往二級(jí)界面?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)