无法通过本机导航导航到有条件设置的屏幕

Question

我是 React Native 的新手，可能是我的代码设置不当，但是，我有条件地设置了导航器 - 基于用户是否登录。

const App: React.FunctionComponent<{}> = () => {
  const auth = useAppSelector((state) => state.auth.value);
  return (
    <NavigationContainer>
      {auth == null ? (
        <Stack.Navigator screenOptions={{headerShown: false}}>
          <Stack.Screen name="Sign In" component={LoginScreen} />
          <Stack.Screen name="Register" component={RegisterScreen} />
        </Stack.Navigator>
      ) : (
        <Drawer.Navigator
          initialRouteName="HomeScreen"
          drawerContent={(props) => <CustomDrawerContent {...props} />}
          drawerContentOptions={{
            activeTintColor: color.primaryDark,
            itemStyle: {
              backgroundColor: 'transperant',
              borderColor: color.primaryDark,
              borderBottomWidth: 1,
              opacity: 0.8,
            },
          }}
          drawerStyle={styles.drawer}>
          <Drawer.Screen name="Home" component={HomeScreen} />
          <Drawer.Screen name="Notifications" component={NotificationsScreen} />
        </Drawer.Navigator>
      )}
    </NavigationContainer>
  );
};

如上面的代码所示，导航将根据是否设置了 auth 来设置，这是用户的身份验证令牌。这很好用，我遇到的问题是注销时。

注销按钮在抽屉里：

function CustomDrawerContent(props: DrawerContentComponentProps) {
  const dispatch = useAppDispatch();
  const onLogOutPress = () => {
    dispatch(logOut());
    props.navigation.navigate('Sign In');
  };
  return (
    <DrawerContentScrollView
      {...props}
      contentContainerStyle={styles.drawerContentContainer}>
      <View style={styles.drawerUpperItemsAlignment}>
        <DrawerItemList {...props} />
      </View>
      <DrawerItem
        label="Logout"
        onPress={onLogOutPress}
        style={styles.drawerBottomItems}
      />
    </DrawerContentScrollView>
  );
}

其中 redux logOut 操作仅重置令牌状态。单击注销按钮时，出现错误

ERROR The action 'NAVIGATE' with payload {"name":"Sign In"} was not handled by any navigator.

Do you have a screen named 'Sign In'?

我假设这是因为有条件地呈现导航（基于 auth）。但如果是这样的话，我怎样才能在抽屉的导航中使用“登录”屏幕？

Answer 1

dispatch will 是异步的，需要时间来改变你的 redux。

导航时，redux 尚未生效，因此您的 'Sign In' 屏幕不存在。

您不需要导航，因为当 redux 生效时，您的应用程序将自动导航到 'Sign in'，因为当 auth == null 时，它是您导航器的默认屏幕。

无法通过本机导航导航到有条件设置的屏幕

Cannot navigate to conditionally set Screen with react native navigation

reactjs

typescript

react-native

react-native-navigation