在使用条件时反应原生导航显示两个堆栈

Question

我的应用程序有两个堆栈导航器。 根据isLoggedIn条件，应该只显示一个。 但是，两者都显示isLoggedIn = true 。 但是当我将条件设置为false时，它只显示 app. 我根本不明白。

export default function App() {
 const isLoggedIn = true;
 return (
  <NavigationContainer>
      <Stack.Navigator>
          {isLoggedIn === true ? (
          <Stack.Screen name="Auth" component={AuthStackNavigator} />
          ) : (
          <Stack.Screen name="App" component={AppBottomTabNavigator} />
          )}
      </Stack.Navigator>
  </NavigationContainer>
);
}

当 isLoggedIn 设置为 true

当 isLoggedIn 设置为 false

Answer 1

你能试试这个。

export default function App() {
 const isLoggedIn = true;
 return (
  <NavigationContainer>
      <Stack.Navigator>
          {isLoggedIn === true  && <Stack.Screen name="Auth" component={AuthStackNavigator} />}
         {isLoggedIn === false && <Stack.Screen name="App" component={AppBottomTabNavigator} />}
      </Stack.Navigator>
  </NavigationContainer>
);
}