React native 用户注销时重置主StackNavigator？

我正在构建一个react本机应用程序，其中有用户功能的登录注销

当用户从系统注销并在登录屏幕上移动时，我想重置我的主

StackNavigator

当我从抽屉菜单中重置主

StackNavigator

时出现问题

这是我的密码：

const OrderStack = createStackNavigator({
    Orders: {
        screen: Orders,
    },
    OrderDetails: {
        screen: OrderDetails,
    },
    DeliveryStatus: {
        screen: DeliveryStatus,
    },
    DeliveryInstructions: {
        screen: DeliveryInstructions,
    },
    ProductDetails: {
        screen: ProductDetails,
    },
});

const DrawerNavigations = createDrawerNavigator({
    Home: OrderStack,
    Location: {
        screen: createStackNavigator({
            Location: {
                screen: Location,
            },
        }),
    }
});
const RootStack = createStackNavigator(
    {
        Login: {
            screen: Login,
        },
        Home: {
            screen: DrawerNavigations,
        }
    },
    {
        initialRouteName: 'Login',
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false,
        }
    },
);


const AppNavigator = createAppContainer(RootStack);

export default class Main extends Component{
    render() {
        return (
            <AppNavigator
                ref={navigatorRef => {
                    NavigationService.setTopLevelNavigator(navigatorRef);
                }}
            />
        )
    }
}

navigationService.js

import { NavigationActions, StackActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
    _navigator = navigatorRef;
}

function navigateAndReset(routeName){
    _navigator.dispatch(
        StackActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({
                    routeName,
                }),
            ],
        })
    );
}

export default {
    setTopLevelNavigator,
    navigateAndReset,
};

---

您的

resetAction

不成功，因为您正在将操作分派到

OrderStack

上。您需要将

resetAction

分派给

RootStack

。建议一些有趣的方法，你可以做到这一点，有一个阅读

还有，这是我首选的解决方案。因为这样，我就不必在导航器周围传递道具或调用多个嵌套操作

创建一个包含以下内容的

navigationService.js

（将顶级导航器作为参考）

从'react navigation'导入{NavigationActions，StackActions}；
让"航海家",；
函数setTopLevelNavigator（navigatorRef）{
_navigator=navigatorRef；
}
函数navigateAndReset（routeName，params）{
_导航器调度(
StackActions.reset({
索引：0，
行动：[
导航({
罗特奈，
params，
}),
],
})
);
}
//添加您需要的其他导航功能并将其导出
导出默认值{
setTopLevelNavigator，
导航数据集，
};

在您的

App.js

或您呈现

AppNavigator

（或

RootStack

）的任何其他文件上，导入

NavigationService

并设置对

AppNavigator

的引用

从“/NavigationService”导入导航服务；
...
render（）{
返回(
...
{
NavigationService.setTopLevelNavigator（navigatorRef）；
}}
/>
...
)
}

当您想重置到

登录

页面时，只需导入

导航服务

并调用

NavigationService.navigateAndReset（'Login'，{…yourParamsIfAny}）；

将此行更改为

操作：[NavigationActions.Navigation（{routeName:'Home'}）]，

至

操作：[NavigationActions.navigate（{routeName:'Login'}）]，

注销时按您会遇到什么问题？未找到密钥登录仅允许订单：{screen:Orders，}，OrderDetails:{screen:OrderDetails，}，DeliveryStatus:{screen:DeliveryStatus，}，DeliveryInstructions:{screen:DeliveryInstructions，}，ProductDetails:{screen:ProductDetails，}，@西莎，这就像一个从左到右的导航，当我按下后，它会back@NaveedSheriffdeen查看我的最新答案您是否介意分享您所做的更改以及您收到的错误？您应该调用

NavigationService.navigateAndReset（'Login'）

在您的注销按钮上，您能试试这个并告诉我它是否有效吗？好的，尝试在

导航设置
功能的顶部执行
控制台.log（\u navigator）
以检查您是否使用了正确的导航器。如果正确，您应该能够在
路由
中查看
登录
和
主页
。让我们结帐吧。
import { NavigationActions, StackActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
    _navigator = navigatorRef;
}

function navigateAndReset(routeName){
    _navigator.dispatch(
        StackActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({
                    routeName,
                }),
            ],
        })
    );
}

export default {
    setTopLevelNavigator,
    navigateAndReset,
};