所有页面的底部标签

Question

我明白，如果我使第二页成为一个选项卡，底部的选项卡将呈现。虽然，我不想把它作为一个单独的选项卡，我只是希望底部选项卡在所有屏幕上都能呈现。

我在这里做了一个复制品

还有，为什么头显示当我设置为false?

Answer 1

你所要做的就是像这样

• 根堆栈作为标签导航器堆栈
• 添加一个标签屏幕，其中包含一个StackNavigator的代码为首页作为顶部堆栈屏幕，然后其余的页面应该在那里之后

这里显示了它的零食代码链接

代码也可以在这里看到:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import SecondPage from './screens/SecondPage';
import Home from './screens/Home'
const Tab = createBottomTabNavigator();
function MyNonTabStack() {
//    const dispatch = useDispatch();
//    const auth = useSelector((state) => state.auth);
return (
<Stack.Navigator
initialRouteName="Home"
>
<Stack.Screen
name="Home"
component={Home}
options={{
headerShown:false,
}}
/>
<Stack.Screen name="SecondPage" component= {SecondPage} options={{headerShown: false}}/> 
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: '#F60081',
style: {
backgroundColor: '#FFFFFF',
borderTopColor: 'transparent'
}
}}

>
<Tab.Screen
name="Home"
component={MyNonTabStack}
options={{
headerShown:false,
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
</NavigationContainer>
);
}
const Stack = createStackNavigator();