时间戳

首页 > 解决方案 > 无法在 react-native 中设置 BottomTabNavigator 颜色

reactjs - 无法在 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>
  );
}

标签： reactjsreact-native

解决方案

barStyle您可以使用Tab Navigator 的 prop检查此解决方案的变体：

    <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>

推荐阅读