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

Question

所以我有 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>
);
}

Answer 1

您不必初始化 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>
);
}

Answer 2

这很可能是因为您不使用react-navigation
createStackNavigator()此外，您也使用Stack.Navigator和Tab.Navigator，尽管您需要使用其中之一。

看看这个零食！
https://snack.expo.io/@apollonseven/27cc9e