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

Posted 2023-03-13

【中文标题】无法通过反应本机导航导航到有条件地设置屏幕

【英文标题】：Cannot navigate to conditionally set Screen with react native navigation

【发布时间】：2021-07-25 23:23:42

【问题描述】：

我对本机反应相当陌生，可能是我的代码设置不佳，但是，我有条件地设置了我的导航器 - 基于用户是否登录。

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 操作仅重置令牌状态。单击注销按钮时，我收到错误

错误带有有效负载 "name":"Sign In" 的操作“NAVIGATE”未被任何导航器处理。

您有名为“登录”的屏幕吗？

我认为这是因为有条件地渲染导航（基于auth）。但如果是这种情况，我怎样才能在抽屉的导航中显示“登录”屏幕？

【参考方案1】：

dispatch 将是异步的，需要时间来更改您的 redux。

当您导航时，redux 尚未生效，因此您的“登录”屏幕不存在。

您不需要导航，因为当 redux 生效时，您的应用会自动导航到“登录”，因为当 auth == null 时，它是您的导航器的默认屏幕。

【讨论】：

我花了大约一个小时尝试不同的方式来导航到屏幕，结果发现 redux 和 react-native 太棒了，他们会为我做的。