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

本文主要是介绍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',}
);