admin管理员组文章数量:1633769
我们在项目中常常有这样的需求 , 给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
*/
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');
本文标签: 两种路由操作方法ReactNavigation
版权声明:本文标题:ReactNavigation 重置路由栈的两种方法 以及SwitchNavigator不处理回退操作 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729177811a1188939.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论