分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了无法在 react-native 中设置 BottomTabNavigator 颜色，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决无法在 react-native 中设置 BottomTabNavigator 颜色？

开发过程中遇到无法在 react-native 中设置 BottomTabNavigator 颜色的问题如何解决？下面主要结合日常开发的经验，给出你关于无法在 react-native 中设置 BottomTabNavigator 颜色的解决方法建议，希望对你解决无法在 react-native 中设置 BottomTabNavigator 颜色有所启发或帮助；

我无法从默认的蓝色切换底部标签的颜色。我发现并尝试了许多不同的方法来设置颜色，但都没有奏效。这是我的代码，目前我正在尝试使用 tabbarcolor 设置颜色：

import React from 'react';
import { HomeScreen } from "./src/screens/HomeScreen";
import { NavigationContainer } from "@react-navigation/native";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import Icon from 'react-native-vector-icons/Ionicons';
import { BACkground } from 'jimp';

const Tabs = createMaterialBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tabs.Navigator>
        <Tabs.Screen name='Home' component={HomeScreen}
          options={{            
            tabbarLabel: 'Home',tabbarcolor: '#696969',tabbarIcon: ({Color}) => (
              <Icon name='ios-home' color={Color} size={26} />
            ),}}/>
      </Tabs.Navigator>
    </NavigationContainer>
  );
}

解决方法

您可以使用 barStyle 选项卡导航器的道具检查此解决方案变体：

    <NavigationContainer>
      <Tab.Navigator
        initialRoutename="Home"
        activeColor="#f0edf6"
        inactiveColor="#3e2465"
        barStyle={{ BACkgroundColor: '#694fad' }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="SetTings" component={SetTingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>