【React Native开发】 - 导航器Navigator的使用

1.Navigator的认识

官方介绍：使用Navigator可以使的应用在不同场景（页面）之间进行切换。Navigator通过路由对象（route）分辨不同的

场景（页面）。利用renderScene()方法，导航栏可以根据指定的路由来渲染场景（页面）。

Navigator可以通过configureScene属性获取路由对象的配置信息，从而改变场景的动画或手势。

2.Navigator属性

 - initialRoute object 参数对象  进行设置导航初始化的路由页面。路由是标识导航器渲染标识每一个页面的对象。initialRoute必须为initialRouteStack中的路由。同时initialRoute默认为initialRouteStack中路由栈的最后一项。

 - initialRouteStack  [object] 参数对象数组   是一个初始化的路由数组。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用最后一项作为初始路由。 如果initalRouteStack属性没有设置的话，会生成只包含initalRoute值的数组。

  - configureScene  function 方法，为可选的方法，进行配置页面切换动画和手势。通过路由和路由栈两个参数调用，返回一个页面参数配置对象：

configureScene = {
    (route,routeStack) => {
        return Navigator.SceneConfigs.FloatFromRight;　　//配置场景动画，页面之间跳转时候的动画
    }
}
 - navigator object 可选参数，可以从父类导航器中获取导航器对象。
 - navigationBar  node  该为可选的参数，在页面切换中用来提供一个导航栏。
 - renderScene  function  必须调用的方法，用来渲染每一个路由指定的页面。参数为路由以及导航器对象两个参数。
 - sceneStyle 样式风格，该继承了View视图的所有样式风格。

场景转场动画的分类：
 Navigator.SceneConfigs.PushFromRight (default)
 Navigator.SceneConfigs.FloatFromRight
 Navigator.SceneConfigs.FloatFromLeft
 Navigator.SceneConfigs.FloatFromBottom
 Navigator.SceneConfigs.FloatFromBottomAndroid
 Navigator.SceneConfigs.FadeAndroid
 Navigator.SceneConfigs.HorizontalSwipeJump
 Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
 Navigator.SceneConfigs.VerticalUpSwipeJump
 Navigator.SceneConfigs.VerticalDownSwipeJump

3.Navigator方法

 - getCurrentRoutes() 返回存在的路由列表信息
 - jumpBack() 回退操作，但是不会卸载（删除）当前页面

 - jumpForward() 跳转到相对于当前页面的下一个页面

- jumpTo(route) 根据传入的路由信息，跳转到一个指定的页面（该页面不会卸载删除）

- push(route) 导航切换到一个新的页面，新的页面进行入栈。通过jumpForward()方法可以回退过去

- pop 当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面

- replace(route) 传入路由的指定页面进行替换掉当前的页面

 - replaceAtIndex(route, index) 传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面

 - replacePrevious(route) 传入路由，通过指定路由的页面替换掉前一个页面

- resetTo(route) 进行导航到新的界面，并且重置整个路由栈

 - immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈

- popToRoute(route) 进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除

- popToTop() 进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除

4.实例

index.android.js和index.ios.js代码：

import './luancher'

luancher.js
import React, { Component } from 'react';
import {
    AppRegistry,
} from 'react-native';
import Root from './navigator/root'

AppRegistry.registerComponent('ImageDemo', () => Root);
使Android和IOS都可运行。

root.js

import React ,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Navigator,
    Dimensions,
    Platform,
    StatusBar,
} from 'react-native'
import Home from './Home'
export default class Root extends Component{
    constructor(props){
        super(props)
    }
    
    render(){
        return (
            Platform.OS === 'ios'?(
                <View style={styles.container}>
                    <Navigator
                        initialRoute = {{name: 'home', component: Home}}　　//初始化导航器Navigator,指定默认的页面
                        configureScene = {
                            (route,routeStack) => {
                                return Navigator.SceneConfigs.FloatFromRight;　　//配置场景动画，页面之间跳转时候的动画
                            }
                        }
                        renderScene = {
                            (route, navigator) =>{ //route里其实就是我们传递的name,component，navigator是一个 Navigator的对象
                                let Component = route.component;
                                return <Component{...route.params} navigator = {navigator} />　　//渲染场景  navigator作为props传递给了这个 component。
                            }
                        }
                    />
                </View>
            ):(
            <View style={styles.container}>
                <StatusBar
                    backgroundColor="#FD6363"
                    barStyle="light-content"/>
                <Navigator
                    initialRoute = {{name: 'home', component: Home}}　　//初始化导航器Navigator,指定默认的页面
                    configureScene = {
                            (route) => {
                                return Navigator.SceneConfigs.FloatFromRight;　　//配置场景动画，页面之间跳转时候的动画
                            }
                        }
                    renderScene = {
                            (route, navigator) =>{ //route里其实就是我们传递的name,component，navigator是一个 Navigator的对象
                                let Component = route.component;
                                return <Component{...route.params} navigator = {navigator} />　　//渲染场景  navigator作为props传递给了这个 component。
                            }
                        }
                />
            </View>
        )
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
    },
})
root.js解析：initialRoute初始化一个Route（路由），定义初始化的Component；
      configureScene设置页面切换的动画；
      renderScene渲染场景，指定路由和导航器，并把导航器传递进去。

Home.js
import React,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Navigator,
    TouchableHighlight,
    Dimensions,
} from 'react-native'
import Detail from './Detail'
const {width,height} = Dimensions.get('window')
export default class Home extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.btn}>
                <TouchableHighlight style={styles.touchableBtn} onPress={this.toPage.bind(this)}>
                    <Text style={styles.text}>跳转页面</Text>
                </TouchableHighlight>
            </View>
        )
    }
    toPage(){
        const {navigator} = this.props
        if (navigator){
            navigator.push({
                name:'detail',
                component:Detail,
            })
        }
    }
}
const styles = StyleSheet.create({
    btn:{
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#fff',
        height:height,
    },
    touchableBtn:{
        backgroundColor:'#FD6363',
        padding:8,
        borderRadius:8,
    },
    text:{
        color:'#fff',
        fontSize:12,
    },
})
Home.js解析： 
toPage(){
        const {navigator} = this.props 
        if (navigator){
            navigator.push({
                name:'detail',
                component:Detail,
            })
        }
    }
navigator.push压栈
 const {navigator} = this.props //从props中取的Navigator，确保用的是同一个

Detail.js
import React ,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableHighlight,
    Dimensions,
} from 'react-native'
const {width,height} = Dimensions.get('window')
export default class Detail extends Component{
    constructor(props){
        super(props)
    }
    back(){
        const{navigator} = this.props;
        if(navigator){
            navigator.pop();　　//navigator.pop 使当前页面出栈, 显示上一个栈内页面.
        }
    }
    render(){
        return (
            <View style={styles.container}>
                <View style={styles.titleStyle}>
                    <TouchableHighlight onPress={this.back.bind(this)}>
                        <Image source={require('./images/ic_back.png')} style={styles.back}></Image>
                    </TouchableHighlight>
                    <Text style={styles.textStyle}>详情页</Text>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
    },
    titleStyle:{
        flexDirection:'row',
        height:40,
        backgroundColor:'#FD6363',
        alignItems:'center',
    },
    back:{
        marginLeft:10,
        width:25,
        height:25,
    },
    textStyle:{
        position:'absolute',
        color:'#fff',
        fontSize:14,
        top:12,
        left:(width/2-12),
    },
})

5.效果

点击跳转页面按钮 跳转到详情页面

点击返回按钮再次返回到上一页面