如何将公共屏幕添加到反应导航

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

不是基于isLoggedIn 状态启动两个单独的堆栈导航器，您可以做的是启动一个堆栈导航器，然后根据isLoggedIn 状态放置屏幕。像下面这样

      <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>
    

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