所有页面的底部标签

Question

我知道如果我将第二页设为选项卡，那么底部选项卡将会呈现。虽然，我不想将它作为一个单独的选项卡，但我只想在所有屏幕上呈现底部选项卡。

我已经复制了这个snack here

另外，为什么 header 设置为 false 时显示？

Answer 1

你所要做的就是这样

作为选项卡导航器堆栈的根堆栈
添加一个包含 StackNavigator 的选项卡屏幕，其中包含主页代码作为顶部堆栈屏幕，然后其余页面也应该在那里

这里显示一个零食代码 LINK

代码也可以在这里看到：

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();

所有页面的底部标签

Bottom tab across all pages

reactjs

react-native

react-native-tabnavigator