ReactNavigation 重置路由栈的两种方法 以及SwitchNavigator不处理回退操作

我们在项目中尝尝有这样的需求 , 给app添加一个广告业/启动页/引导页等等, 之后进入app的主页面 , 前面的 广告业/启动页/引导页 不提供入口,并且按返回键也不会回到那个页面. 一般我们会跳转到主页之后重置路由,今天提供两种方法来实现.

首先是跳转之后重置路由:

//首先导入NavigationActions
import {NavigationActions} from 'react-navigation';

//然后设置新路由的第0个路由为home 
const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
        NavigationActions.navigate({routeName: 'home'}),
    ],
});

//执行重置路由方法
this.props.navigation.dispatch(resetAction)

放上 demo中的源码以供参考:

/**
 * Created by 卓原 on 2018/3/2.
 * zhuoyuan93@gmail.com
 */
import React from 'react';
import {
    SafeAreaView,
    View,
    Text,
    StyleSheet
} from 'react-native';
import {NavigationActions} from 'react-navigation';

const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
        NavigationActions.navigate({routeName: 'home'}),
    ],
});
export default class WelcomePage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            time: 2
        }
    }

    componentDidMount() {
        /*this.timeGoHome = setTimeout(() => {
            this.props.navigation.navigate('home')
        }, 2000);*/
        this.timeGoHome = setInterval(() => {
            if (this.state.time === 0) {
                this.props.navigation.navigate('home');
                this.props.navigation.dispatch(resetAction);
                this.timeGoHome && clearTimeout(this.timeGoHome);
            } else {
                this.setState({
                    time: this.state.time - 1
                })
            }
        }, 1000);
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>{`欢迎,进入倒计时:${this.state.time}秒`}</Text>
            </View>
        )
    }

    componentWillUnmount() {
        this.timeGoHome && clearTimeout(this.timeGoHome);
        //this.timeGoHome && this.timeGoHome.clear();
        console.log('欢迎页面-componentWillUnmount')
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})

之后我们的home 也就是我们app常规的主页面就在路由栈顶了,返回键自然不生效了.
然后看第二种方法.
先介绍一下 : SwitchNavigator,
SwitchNavigator是一次只显示一个屏幕。默认情况下，它不处理回退操作，并在您切换时将路由重置为默认状态.
我们SwitchNavigator通过使用navigate动作在路线之间切换。

SwitchNavigator(RouteConfigs, SwitchNavigatorConfig)
RouteConfigs
路由CONFIGS对象是从路由名称映射到一个路由配置，它告诉导航以呈现该路线什么，参见StackNavigator。

SwitchNavigatorConfig
有几个选项会传递给底层路由器来修改导航逻辑：

initialRouteName - 第一次加载时初始选项卡路由的routeName。
resetOnBlur - 切换离开屏幕时，重置所有嵌套导航器的状态。默认为true。
paths - 提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
backBehavior - 后退按钮是否会导致标签切换到初始路由？如果是，则设置为initialRoute，否则none。默认为none行为。

import { StackNavigator, SwitchNavigator } from 'react-navigation';
//SwitchNavigator在1.3.0才有

// Implementation of HomeScreen, OtherScreen, SignInScreen, LoadingScreen
// goes here.
const AppStackNavigator = StackNavigator({
    home: {
        screen: Tab,
        navigationOptions: {
            header: null
        }
    },
    welcome: {
        screen: WelComePage,
        navigationOptions: {
            header: null
        }
    },
    NewPage: {
        screen: NewPage,
        navigationOptions: {
            header: null
        }
    }

});
//welcome为欢迎页 
export default SwitchNavigator(
    {
        welcome: WelComePage,
        App: AppStackNavigator,
    },
    {
        initialRouteName: 'welcome',
    }
);

通过SwitchNavigator 来实现切换路由,可以达到返回键不会回退回去的目的.
这时,我们直接跳转就可以了:

this.props.navigation.navigate('App');