如何在反应导航中使用超过 2 种颜色更改活动选项卡颜色

Question

我需要在主屏幕中将标签图标背景颜色更改为红色，在另一个标签（列表）中更改为黄色 当我单击特定选项卡时，另一个选项卡（部分）中的蓝色

在我的应用中，它有三个页脚标签。

我需要用不同的颜色为每个标签更改颜色。 我怎样才能做到这一点？

const HomeTabNavigator = createBottomTabNavigator({
  ListScreen,
  HomeScreen,
  SectionScreen,
}, {
  initialRouteName: 'HomeScreen',
  tabBarOptions: {
    activeTintColor: 'red',
    style: {
      paddingTop: 5,
      height: 65
    }
  }
});

Answer 1

import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
        

    
    const Tab = createMaterialBottomTabNavigator();
   
const BottomTabScreen = () => (        
        <Tab.Navigator activeColor="#fff">
                <Tab.Screen
                  name="Home"
                  initialRouteName="Home"
                  component={HomeScreen}
                  options={{
                    tabBarLabel: 'Home',
                    tabBarColor: '#3333cc',
                    tabBarIcon: ({color}) => (
                      <Icon name="ios-home" color={color} size={26} />
                    ),
                  }}
                />
                <Tab.Screen
                  name="Notifications"
                  component={UpdateScreen}
                  options={{
                    tabBarLabel: 'Updates',
                    tabBarColor: '#196619',
                    tabBarIcon: ({color}) => (
                      <Icon name="ios-notifications" color={color} size={26} />
                    ),
                  }}
                />
                <Tab.Screen
                  name="Profile"
                  component={ProfileScreen}
                  options={{
                    tabBarLabel: 'Profile',
                    tabBarColor: '#e67300',
                    tabBarIcon: ({color}) => (
                      <Icon name="ios-person" color={color} size={26} />
                    ),
                  }}
                />
                <Tab.Screen
                  name="Explore"
                  component={ExploreScreen}
                  options={{
                    tabBarLabel: 'Explore',
                    tabBarColor: '#751a2e',
                    tabBarIcon: ({color}) => (
                      <Icon name="ios-aperture" color={color} size={26} />
                    ),
                  }}
                />
              </Tab.Navigator>
    );
    
    export default BottomTabScreen;

Answer 2

您可以使用 tabBarOptions 设置 activeBackgroundColor 和 inactiveBackgroundColor 但是所有标签都是一样的。

为了与众不同，您必须自定义其 Tab 组件。 用于 tabBar 道具的 React Navigation v5 文档。

这里是文档tabBar

const MyTabBar = ({state, descriptors, navigation}) => {
  return (
    <View style={{flexDirection: 'row'}}>
      <View style={{backgroundColor: 'red'}}>
        <Text>One Tab</Text>
      </View>
      <View style={{backgroundColor: 'yellow'}}>
        <Text>Second Tab</Text>
      </View>
      <View style={{backgroundColor: 'blue'}}>
        <Text>Third Tab</Text>
      </View>
    </View>
  );
}

和路由器文件

<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>

</Tab.Navigator>

编辑： 用于反应导航 v3；

const TabBarComponent = (props) => (<BottomTabBar {...props} />);
const TabScreens = createBottomTabNavigator(
  {
    tabBarComponent: props =>
      <TabBarComponent
        {...props}
        style={{ borderTopColor: '#605F60' }}
      />,
  },
);

文档 v3 tabBarComponent