React Native中Tab.Navigator的tabBarOptions属性不显示如何解决

根因 #

你使用的@react-navigation/bottom-tabs为v6及以上版本，该版本起已完全移除tabBarOptions属性，所有原属于该属性的配置项都迁移到了Tab.Navigator的screenOptions参数中统一配置。

代码修改示例 #

将你代码中Tab.Navigator部分修改为如下结构即可：

import React from 'react';
import {View, StyleSheet, SafeAreaView, Text} from 'react-native';
// 注意修正原导入的多余空格
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import HomeScreen from './app/screens/HomeScreen';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          // 原tabBarOptions下的所有配置都移到此处
          tabBarActiveTintColor: '#841548', // 选中态标签文字/图标颜色
          tabBarInactiveTintColor: 'gray', // 未选中态标签文字/图标颜色
          tabBarStyle: {
            backgroundColor: 'white',
            height: 60,
            paddingBottom: 8,
          },
          tabBarLabelStyle: {
            fontSize: 12,
            fontWeight: '500'
          }
        }}
      >
        <Tab.Screen name="Home" component={HomeStack} options={{title: '首页'}} />
        {/* 补充其他Tab.Screen配置 */}
      </Tab.Navigator>
    </NavigationContainer>
  );
}

function HomeStack() {
  return (
    <Stack.Navigator
      initialRouteName="HomeScreen"
      screenOptions={{
        headerStyle: {backgroundColor: '#841548'},
        headerTintColor: 'white',
        headerTitleStyle: {fontWeight: 'bold'},
      }}>
      <Stack.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{title: 'Home Page'}}
      />
    </Stack.Navigator>
  );
}

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: 'white'},
});

新旧版本配置对应关系 #

• 原tabBarOptions.activeTintColor → 现screenOptions.tabBarActiveTintColor
• 原tabBarOptions.inactiveTintColor → 现screenOptions.tabBarInactiveTintColor
• 原tabBarOptions.style → 现screenOptions.tabBarStyle
• 原tabBarOptions.labelStyle → 现screenOptions.tabBarLabelStyle
• 原tabBarOptions.showLabel → 现screenOptions.tabBarShowLabel

内容的提问来源于stack exchange，提问作者Hamid Hussainy