vak*_*nzi 5 react-native react-navigation
我有以下结构:
const routeConfiguration = {
Login: { screen: Login },
Home: { screen: TabBar },
};
const stackNavigatorConfiguration = {
headerMode: 'screen',
navigationOptions: {
header: { visible: false }
}
};
export const RootNav = StackNavigator(routeConfiguration, stackNavigatorConfiguration);
Run Code Online (Sandbox Code Playgroud)
我的TabBar,每个Tab都有自己的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);
Run Code Online (Sandbox Code Playgroud)
当应用程序首次加载时进入登录屏幕.成功登录后,我使用actionTypes.TO_HOME转到Home.我有3个标签(Feed,Suggestion,Profile).在里面的配置文件选项卡我按下了注销按钮,我重置了导航历史记录并再次登录(到目前为止一直很好).但是当我再次登录并转到Home时,它会显示第一个选项卡并导航我到最后一个(Profile),看起来TabNavigator的历史记录未被重置.我应该做一些特别的事情,以便TabNavigator的历史也被重置吗?
这是我的reducer,用于重置历史记录并进入Login屏幕:
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;
};
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
969 次 |
| 最近记录: |