反应原生 Tabbar 颜色更改不起作用答案

【问题标题】：React native Tabbar color change does not work反应原生 Tabbar 颜色更改不起作用
【发布时间】：2021-02-28 00:56:36
【问题描述】：

我想在 react native 中单击标签栏时更改标签栏的颜色。我尝试使用此代码，但它显示了我 iPhone 上的标准颜色。我搜索了解决方案，但没有人在工作。更改 tabBarLabel 有效，但颜色无效。你可以帮帮我吗？这是我的代码：

const Tab = createBottomTabNavigator();

<Tab.Screen name="Settings" component={Settings}
  tabBarBadgeStyle={{backgroundColor: '#0000ff', color:'green'}}
 
 tabBarOptions={{
   tabBarLabel: 'Test',
   style: { backgroundColor: 'orange'}
 }}/>

【问题讨论】：

标签： javascript css react-native tabbar

【解决方案1】：

您必须在导航器中添加 tabBarOption 而不是 screen ，

    <Tab.Navigator
          tabBarOptions: {
          activeTintColor: '#e91e63',
         labelStyle: {
          fontSize: 12,
               },
         style: {
       backgroundColor: 'blue',
           },
         }>
          <Tab.Screen
            name={variable.overViewScreen}
            component={Overview}
          />
          <Tab.Screen
            name={variable.homeScreen}
            component={DashboardRoot}
          />
        </Tab.Navigator>

【讨论】：