时间戳

首页 > 解决方案 > 如何在反应导航中使用超过 2 种颜色更改活动选项卡颜色

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

问题描述

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

在我的应用程序中，它有三个页脚选项卡。

我需要为每个具有不同颜色的选项卡更改颜色。我怎样才能做到这一点？

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

标签： react-nativereact-navigation

解决方案

您可以使用tabBarOptions设置 activeBackgroundColor 和 inactiveBackgroundColor 但所有选项卡都是相同的。

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

这是文档标签栏

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' }}
      />,
  },
);

Doc v3 tabBarComponent

推荐阅读