我对 React/React Native 很陌生...
我正在使用 React Navigator 5。我在主屏幕上有标签导航,我想为标签导航结构中的两个“标签”创建堆栈导航(在标签导航容器外有新屏幕)。
这就是所谓的“嵌套导航”吗?
谢谢
答案 0 :(得分:0)
创建根堆栈容器和选项卡容器。 如果要在堆栈容器中显示选项卡,请将组件指定为选项卡容器。
例如:
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
const MyTabs = () => {
const Navigation = () => (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Home" component={BottomNav} />
<Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>
</NavigationContainer>
);
const BottomNav = () => (
<Tab.Navigator>
<Tab.Screen name="Streams" component={Streams} />
<Tab.Screen name="Tweets" component={Tweets} />
<Tab.Screen name="Reported" component={Reported} />
<Tab.Screen name="Leaderboard" component={Leaderboard} />
</Tab.Navigator>
);
return <Navigation />
}
export default MyTabs;