reactjs - 所有页面的底部标签

Question

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

我在这个 snack here 做了一个复制品

另外，为什么当我将它设置为 false 时标题会显示？

Answer 1

你所要做的就是这样

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

这里显示了一个零食代码 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();