gpt4 book ai didi

reactjs - 用户注销(从其他屏幕)时如何重置 TabNavigator

转载 作者:行者123 更新时间:2023-12-03 13:35:08 45 4
gpt4 key购买 nike

这是我的项目文件层次结构

RootTabNavigator
| AuthStackNavigator // I want to go back to this navigator
| AuthoScreen
| Welcome Screen
| MainTabNavigator // I want to reset MainTabNavigator
| FeedStacknavigator
| Screen A
| OtherStackNavigatorOne
| Screen E
| OtherStackNavigatorTwo
| Screen D
| MenuStackNavigator
| Menuo <-I'm here and want to reset to 'MainTabNavigator'
and go BACK to 'AuthScreen'
| Screen B
| Screen C

问题

用户位于 MenuStackNavigator 和 MainTabNavigator 下的 Menuo 屏幕上。

如果用户没有 token (当用户注销时),用户将返回到身份验证屏幕。

但同时我想重置MainTabNavigator。您可以卸载、执行 NavigationActions.init() 或任何您可以执行的操作。我更喜欢 NavigationActions.init()

我只想将 MainTabNavigator 设置为第一次。

代码

如果没有 token ,我将返回到身份验证屏幕(这正在工作)

This code if the part of Menuo Screen

componentWillReceiveProps(nextProps) {
if ( nextProps.token == undefined || _.isNil(nextProps.token) ) {
const backAction = NavigationActions.back({
key: null
})
nextProps.navigation.dispatch(backAction);
...

(问题)我们如何重置 MainTabNavigator 包括子 StackNavigator?

MainTabNavigator.js

export default TabNavigator(
{
Feed: {
screen: FeedStacknavigator,
},
OtherOne: {
screen: OtherStackNavigatorOne,
}
...
}, {
navigationOptions: ({navigation}) => ){
header: null,
tabBarIcon: ({focused}) => ...
...
}

可能的解决方案

我也许可以将 MainTabNavigator 从函数更改为类,并在那里重置 TabNavigator。 (我不知道)。

这一次,我需要一个具体的工作示例。我一直在阅读文档并应用于我的应用程序,但我无法解决这个问题。

如果有任何不清楚的地方,请告诉我。

更新

const RootTabNavigator = TabNavigator ({
Auth: {
screen: AuthStackNavigator,
},
Welcome: {
screen: WelcomeScreen,
},
Main: {
screen: MainTabNavigator,
},
}, {
navigationOptions: () => ({
...
}
);

export default class RootNavigator extends React.Component {
componentDidMount() {
this._notificationSubscription = this._registerForPushNotifications();
}

最佳答案

这在大多数情况下应该有效:

componentWillReceiveProps(nextProps) {
if ( nextProps.token == undefined || _.isNil(nextProps.token) ) {

let action = NavigationActions.reset({
index: 0,
key: null,
actions: [
NavigationActions.navigate({routeName: 'Auth'})
]
});

nextProps.navigation.dispatch(action);
}
...
}

或者尝试通过自定义操作增强您的导航器:

const changeAppNavigator = Navigator => {
const router = Navigator.router;

const defaultGetStateForAction = router.getStateForAction;

router.getStateForAction = (action, state) => {
if (state && action.type === "RESET_TO_AUTH") {
let payLoad = {
index: 0,
key: null,
actions: [NavigationActions.navigate({routeName: "AuthStackNavigator"})]
};

return defaultGetStateForAction(NavigationActions.reset(payLoad), state);
// or this might work for you, not sure:
// return defaultGetStateForAction(NavigationActions.init(), state)
}
return defaultGetStateForAction(action, state);
};

return Navigator;
};

const screens = { ... }

RootTabNavigator = changeAppNavigator(TabNavigator(screens, {
initialRouteName: ...,
...
}));

然后在您的菜单屏幕中执行以下操作:

componentWillReceiveProps(nextProps) {
if ( nextProps.token == undefined || _.isNil(nextProps.token) ) {

nextProps.navigation.dispatch({type: "RESET_TO_AUTH"});
...

关于reactjs - 用户注销(从其他屏幕)时如何重置 TabNavigator,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47930049/

45 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com