如何在React Native中更改Botton选项卡栏背景颜色？

Question

我正在使用

@react-navigation/bottom-tabs

包。但我不知道如何更改标签栏的背景颜色。这是我的代码。

import React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from "./TabScreen/Home";
import Category from "./TabScreen/Category";
import Search from "./TabScreen/Search";
import Profile from "./TabScreen/Profile";
import Colors from "../../../Style_Sheet/Colors";

const Tab = createBottomTabNavigator();

const Tabs =()=>{
  return(
    <Tab.Navigator tabBarPosition="bottom" barStyle={{ backgroundColor: '#0000' }}>
      <Tab.Screen name="Home" component={Home} options={{headerTitle:"Explore",headerTintColor:Colors.white,}}/>
      <Tab.Screen name="Category" component={Category} />
      <Tab.Screen name="Search" component={Search} />
      <Tab.Screen name="Profile" component={Profile} />

    </Tab.Navigator>
  )
}
export default Tabs;

我在 Tab.Navigator 标签下添加，但它不起作用。

Answer 1

对于版本6，您必须在 Tab.Navigator 中添加这样的 screenOptions

<Tab.Navigator
  screenOptions={{
    tabBarStyle: {
      backgroundColor: '#000',
    },
  }}>
</Tab.Navigator>

Answer 2

如果

<Tab.Navigator 
screenOptions={{
        tabBarStyle: {
          backgroundColor: '#fff',
        },
      }}>
</Tab.Navigator>

不起作用然后更改主题颜色， 下面的代码将在分配边框半径时起作用，并且不能更改背景颜色

1.

import {NavigationContainer, DefaultTheme} from '@react-navigation/native';

2.

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: '#fff',
  },
};

3. <NavigationContainer theme={MyTheme}>

Answer 3

<Tab.Navigator
    screenOptions={{
      tabBarActiveTintColor: '#000000',
      tabBarLabelStyle: { fontSize: 14, textTransform: 'capitalize', fontFamily:'Poppins-Regular'},
      tabBarStyle: { backgroundColor: '#FAFAFA' },
      tabBarUnderlineStyle: { backgroundColor: 'red' },
    }}
    // tabBar={NavRenderer}
    >

    // ....Your screens

</Tab.Navigator>