时间戳

首页 > 解决方案 > React Native Navigation - 即使使用 stackactions.reset 后组件也不会卸载

node.js - React Native Navigation - 即使使用 stackactions.reset 后组件也不会卸载

问题描述

我正在使用带有 react-navigation v4 的 react native

我有一个主屏幕和一个欢迎屏幕。我正在使用 redux 来存储已登录的用户。在欢迎屏幕中（在用户登录之前），我将用户重置为 null，如下所示：

useEffect(() => {
    dispatch(updateCurrentUser(null));
  });

在我的主屏幕上（用户登录后），我通过以下方式使用注销按钮导航到欢迎屏幕：

      <Button
          title="Logout"
          onPress={() => {
            const resetAction = StackActions.reset({
              index: 0,
              actions: [
                NavigationActions.navigate({routeName: "Welcome"}),
              ]
            });
            props.navigation.dispatch(resetAction);
            // navigationData.navigation.pop();
            // navigationData.navigation.navigate({routeName: "Welcome"});
          }}
        />

运行此程序后，每当我按下注销按钮时都会出现错误

由于用户现在为空，并且在主屏幕上我有以下代码<Text style={styles.text}>Welcome, {currentUser.username}!</Text>，我收到一个错误，即 null 没有属性用户名，因为 currentUser 现在为空。

我不明白为什么当我重置堆栈并导航到欢迎屏幕时主屏幕不会卸载并且正在呈现。这里可能是什么问题？

标签： node.jsreactjsreact-nativereact-navigation

解决方案

您可以离开stackaction并使用 switchnavigator 并将这两个屏幕放在不同的堆栈中。喜欢

export default createAppContainer(createSwitchNavigator(
{
    stack1:ScreenStack1,
    App: AppTabs,
},
{
    initialRouteName: 'AuthLoading',
}

));

因此，如果我navigation.navigate("App")从 stack1 开始，并且在某个时间点，如果我从此处的 App 回到 stack1，那么 stack1 的navigation.navigate("stack1")所有屏幕都会表现得像重新渲染一样。

推荐阅读