所有页面的底部标签答案

【问题标题】：Bottom tab across all pages所有页面的底部标签
【发布时间】：2021-08-31 17:16:09
【问题描述】：

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

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

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

【问题讨论】：

您看到的标题来自标签堆栈
在 TabScreen 选项中也这样做 headerShown: false 控制标题删除
就选项卡而言，您只希望一个选项卡和另一个作为 SecondPage 的一堆屏幕？
查看示例和 SnackCode 让我知道您是否需要其他任何东西！我们也可以在零食上合作
嘿，我知道这可能不是您要寻找的答案，但我也遇到了这个问题，我最终将底部选项卡作为组件而不是导航器。这样，我们可以将底部选项卡放在我们想要的每个屏幕中，而不会弄乱导航器。

标签： reactjs react-native react-native-tabnavigator

【解决方案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();

【讨论】：

终于得到了答案