如何将 public 屏幕添加到 react-navigation

Question

我正在使用 Expo 和 react-navigation 构建一个 react-native 应用程序，该应用程序目前有两个导航器，一个对经过身份验证的用户可见，一个仅对未经身份验证的用户可见，例如登录页面。

导航结构如下：

function Navigation({ isLoggedIn }) {
  return (
    <NavigationContainer>
      {isLoggedIn ? (
        <Stack.Navigator>
          <Stack.Screen name="home" component={Home}></Stack.Screen>
          <Stack.Screen name="public" component={Public}></Stack.Screen>
        </Stack.Navigator>
      ) : (
        <Stack.Navigator>
          <Stack.Screen name="login" component={Login}></Stack.Screen>
          <Stack.Screen name="public" component={Public}></Stack.Screen>
        </Stack.Navigator>
      )}
    </NavigationContainer>
  );
}

如您所见，有一个名为 'public' 的屏幕在两个导航器中都出现了两次，因为我希望人们无论其身份验证状态如何都能够查看此组件，这是正确的做法？

Answer 1

您可以启动一个 Stack Navigator，然后根据 isLoggedIn 状态放置屏幕，而不是根据 isLoggedIn 状态启动两个单独的 Stack Navigator。喜欢下面

      <NavigationContainer>
        <Stack.Navigator>
          
          {isLoggedIn ? (
            <Stack.Screen name="home" component={Home}></Stack.Screen>
          ) : (
            <Stack.Screen name="login" component={Login}></Stack.Screen>
          )}
          
          <Stack.Screen name="public" component={Public}></Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>

通过这种方式，您不必将 'public' 屏幕放置两次，但用户无论其身份验证状态如何都可以看到该屏幕。此外，您不必启动 StackNavigator 两次。

如何将 public 屏幕添加到 react-navigation

How do I add public screens to react-navigation

reactjs

react-native

react-navigation

expo