使用反应导航重置 TabNavigator 历史记录 [英] Reset the TabNavigator history with react navigation
问题描述
我有以下结构:
const routeConfiguration = {
Login: { screen: Login },
Home: { screen: TabBar },
};
const stackNavigatorConfiguration = {
headerMode: 'screen',
navigationOptions: {
header: { visible: false }
}
};
export const RootNav = StackNavigator(routeConfiguration, stackNavigatorConfiguration);
我的 TabBar,其中每个 Tab 都有自己的 StackNavigator:
My TabBar where each Tab has it's own StackNavigator:
const routeConfiguration = {
TabOneNavigation: { screen: TabOneNavigation },
TabTwoNavigation: { screen: TabTwoNavigation },
TabThreeNavigation: { screen: TabThreeNavigation },
};
const tabBarConfiguration = {
tabBarOptions: {
activeTintColor: 'white',
inactiveTintColor: 'lightgray',
labelStyle: {
fontSize: 10,
fontFamily: Fonts.book
},
style: {
backgroundColor: Colors.greenLightGradient,
borderTopWidth: 1,
borderTopColor: Colors.tabGreenLine
},
}
};
export const TabBar = TabNavigator(routeConfiguration, tabBarConfiguration);
当应用首次加载时,它会进入登录屏幕.成功登录后,我使用 actionTypes.TO_HOME 转到主页.我有 3 个选项卡(Feed、建议、配置文件).在个人资料"选项卡中,我按下了注销"按钮,在该按钮上我重置了导航历史记录并再次登录(到目前为止一切顺利).但是当我再次登录并转到主页时,它会显示第一个选项卡一秒钟并导航到最后一个(配置文件),看起来 TabNavigator 的历史记录没有重置.我是否应该做一些特别的事情来重置 TabNavigator 的历史记录?
When the app first load It goes to Login screen. After successful login I use actionTypes.TO_HOME to go to Home. There I have 3 tabs (Feed, Suggestion, Profile). Inside Profile tab I have Log Out button pressing on which I reset the navigation history and go to Login Again (so far so good). But when I login again and go to Home, it shows the first tab for a second and navigates me to the last one (Profile) which looks like the TabNavigator's history is not resetted. Should I do something special so that the TabNavigator's history is also resetted?
这是我的reducer,用于重置历史记录并进入登录屏幕:
This is my reducer for resetting the history and going to the Login screen:
export const navReducer = (state = initialState, action = {}) => {
let nextState;
switch (action.type) {
case actionTypes.TO_LOGIN:
nextState = RootNav.router.getStateForAction(
NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ type: NavigationActions.NAVIGATE, routeName: actionTypes.TO_LOGIN })],
key: null
}), state);
break;
case actionTypes.TO_HOME:
nextState = RootNav.router.getStateForAction(
NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ type: NavigationActions.NAVIGATE, routeName: actionTypes.TO_HOME })],
}), state);
break;
default:
nextState = RootNav.router.getStateForAction(action, state);
break;
}
return nextState || state;
};
推荐答案
这是一个 React-Navigation v5 示例,用于清除所有历史记录:
This is an React-Navigation v5 Example, to clear all History:
navigation.dispatch((state) => {
return CommonActions.reset({
...state,
history: state.history
? [
state.history[
state.history.length - 1
],
]
: undefined,
});
});
这篇关于使用反应导航重置 TabNavigator 历史记录的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!