时间戳

首页 > 解决方案 > 如何在 React Navigation 5.x 中从一个堆栈转到另一个包含选项卡堆栈的堆栈？

javascript - 如何在 React Navigation 5.x 中从一个堆栈转到另一个包含选项卡堆栈的堆栈？

问题描述

所以我有 4 个不同的屏幕，一个展示屏幕，一个加载屏幕，一个主页和一个库屏幕

展示屏幕将是这里的初始屏幕，所以当我完成展示后，我进入加载屏幕，然后进入包含两个选项卡的主页，主页和库

这就是我认为应该这样做的方式，但不起作用

const InitialStack = createStackNavigator();
const HomeStack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function InitialStackScreen() {
  return (
    <InitialStack.Navigator>
      <InitialStack.Screen name="Showcase" component={ShowcaseScreen} />
      <InitialStack.Screen name="Loading" component={LoadingScreen} />
    </InitialStack.Navigator>
  );
}

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Library" component={LibraryScreen} />
    </HomeStack.Navigator>
  );
}

export default function Navigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Showcase">
        <Stack.Screen name="Showcase" component={InitialStackScreen} />
      </Stack.Navigator>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

标签： javascriptreact-nativereact-navigationjsx

解决方案

您不必初始化 3 个不同的堆栈导航器构造函数。另外，我相信以下嵌套导航器的方法适用于您的用例，将根堆栈导航器与一个堆栈导航器和一个底部选项卡导航器嵌套。

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function InitialStackScreen() {
  return (
    <Stack.Navigator>
      <InitialStack.Screen name="Showcase" component={ShowcaseScreen} />
      <InitialStack.Screen name="Loading" component={LoadingScreen} />
    </Stack.Navigator>
  );
}

function HomeTabScreen() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Library" component={LibraryScreen} />
    </Tab.Navigator>
  );
}

export default function Navigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Showcase" component={InitialStackScreen} />
        <Stack.Screen name="Home" component={HomeTabScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

更多关于嵌套导航器以及它们如何在这里工作：https ://reactnavigation.org/docs/nesting-navigators/

编辑：无法返回加载和展示屏幕

export default function Navigation() {
  const isAuth = useSelector(state => state.isAuth) // some redux state that indicates if user is authenticated
  return (
    <NavigationContainer>
      {!isAuth && <InitialStackScreen /> }
      {isAuth && <HomeTabScreen />
    </NavigationContainer>
  );
}

推荐阅读