React Native中页面跳转、打开新页面并关闭当前页面

本文纯原创，纯手打，请大神多多指教。转载请注明出处！
react-native版本：0.48; 开发环境win10+VScode; 目标平台：安卓; 最后更新时间：2017.09.23;

说到reactnative中页面跳转官网中已经有（使用导航器跳转页面）
官方在文章中建议我们使用第三方的react-navigation库

使用这个库进行页面跳转很简单代码如下
index.android.js文件

import {  AppRegistry,} from 'react-native';import {StackNavigator} from 'react-navigation'import ViewOne from './app/test/route/ViewOne'import ViewTow from './app/test/route/ViewTow'import ViewThree from './app/test/route/ViewThree'const test = StackNavigator({  One:{screen:ViewOne},  Tow:{screen:ViewTow},  Three:{screen:ViewThree},})AppRegistry.registerComponent('test', () => test);

ViewOne.js文件

import React, { Component } from 'react';import {    Button,    View,    Text,} from 'react-native'class ViewOne extends Component {    static navigationOptions = {        headerTitle:'ViewOne'    }    render() {        return (            <View>                <Button                    onPress={() => { this.props.navigation.navigate('Tow') }}                    title='点击进入ViewTow'                />            </View>        )    }}export default ViewOne;

ViewTow.js文件

import React, { Component } from 'react';import {    Button} from 'react-native'import { NavigationActions } from 'react-navigation'class ViewTow extends Component {    // 这些注释全部是navigationOptions的属性 navigationOptions是标题栏    // title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，所以不推荐使用这个方法。    // header：可以设置一些导航的属性，当然如果想隐藏顶部导航条只要将这个属性设置为null就可以了。    // headerTitle：设置导航栏标题，推荐用这个方法。    // headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null    // headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"。（上个页面的标题过长，导致显示不下，所以改成了短一些的。）    // headerRight：设置导航条右侧。可以是按钮或者其他。    // headerLeft：设置导航条左侧。可以是按钮或者其他。    // headerStyle：设置导航条的样式。背景色，宽高等。如果想去掉安卓导航条底部阴影可以添加elevation: 0，iOS下用shadowOpacity: 0。    // headerTitleStyle：设置导航条文字样式。安卓上如果要设置文字居中，只要添加alignSelf:'center'就可以了    // headerBackTitleStyle：设置导航条返回文字样式。    // headerTintColor：设置导航栏文字颜色。总感觉和上面重叠了。    // headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0    // gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭    static navigationOptions = {        headerTitle: 'ViewTow'    }    render() {        return (            <Button                onPress={() => {                    this.props.navigation.navigate('Three')                }}                title='点击进入ViewThree'            />        )    }}export default ViewTow;

ViewThree.js

import React, {Component} from 'react';import {    Button} from 'react-native'class ViewThree extends Component{    static navigationOptions = {        headerTitle:'ViewThree'    }    render(){        return (<Button  title='ViewThree'/>)    }}export default ViewThree;

上面几个文件运行效果如下

如果你想第一个页面打开第二个页面，或者打开多个页面后 关闭其他页面 只保留打开的页面

也就是打开一个页面，关闭当前页面

我下面吧ViewTow.js文件中的render代码改一下

render() {        return (            <Button                onPress={() => {                    //重构路由页面                    let resetActiom = NavigationActions.reset({                        index: 0,//默认打开actions中的第几个页面                        actions: [//actions是页面集合                            //NavigationActions.navigate({ routeName: 'One' }),                            //NavigationActions.navigate({ routeName: 'Tow' }),                            NavigationActions.navigate({ routeName: 'Three' })//这里有几个就保留几个，点击完成后就会重构导航器                        ]                    })                    this.props.navigation.dispatch(resetActiom)                }}                title='点击进入ViewThree'            />        )    }

我在重构路由后只保留一个界面，运行效果如下

你会发现点击进入第三个界面后 返回箭头消失了，无法返回第一和第二个界面了