我正在努力弄清楚嵌套导航器的工作原理。我想呈现我的选项卡和我的屏幕堆栈。我尝试了几种不同的方法,包括我最后一次出于困惑和只是尝试的尝试。任何帮助表示赞赏!谢谢。
const Tab = createBottomTabNavigator();
function MyTabs() {
// const dispatch = useDispatch();
// const auth = useSelector((state) => state.auth);
return (
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: '#F60081',
style: {
backgroundColor: '#F1F1F1'
}
}}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Notifications"
component={maps}
options={{
tabBarLabel: 'Maps',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="map-marker-circle" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Profile"
component={profile}
options={{
tabBarLabel: 'Profile',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="account" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component= {Home, MyTabs} options={{headerShown: false}}/>
<Stack.Screen name="VenueDetails" component= {VenueDetailsScreen} options={{headerShown: false}}/>
</Stack.Navigator>
);
}
答案 0 :(得分:0)
这是嵌套导航的 example。对于您的示例,您似乎想将选项卡导航器放在堆栈导航器中,因此在您的 App.您可以执行以下操作:
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
上面的顶层有一个堆栈导航器。在该堆栈导航器中,您将看到 3 个屏幕,Home、MyTabs 和 VenueDetails。在 MyTabs 屏幕内,您有一个 Tab 导航器。