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

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

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

图片.png

使用这个库进行页面跳转很简单代码如下
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'
            />

        )
    }

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

这里写图片描述

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