Question

我无法找到更改标签栏中标题颜色的方法。这是我的代码：

  Home:{
screen: TabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
        name={focused ? 'ios-home' : 'ios-home-outline'}
        size={26}
        style={{ color: focused ? `${tabBarColor}` : tintColor}}
        />
      ),
      //headerStyle: {backgroundColor: "#553A91"},
      //headerTitleStyle: {color: "#FFFFFF"},
      header: null,
    }),
  },
  Profile: {
    screen: ProfileScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Profile',
      tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
        name={focused ? 'ios-people' : 'ios-people-outline'}
        size={26}
        style={{ color: focused ? `${tabBarColor}` : tintColor }}
        />
      ),
      //headerStyle: {backgroundColor: "#553A91"},
      //headerTitleStyle: {color: "#FFFFFF"},
      header: null,
    }),
  },
}),
}

我搜索但找不到办法。我希望在未选中选项卡时颜色为默认灰色，但在选中选项卡时，颜色为tabBarColor颜色。

我该怎么做？

提前致谢！

Answer 1

不确定你在哪里搜索，但我花了30秒才看到它。

在TabNavigator Docs中，您显然需要使用activeTintColor

activeTintColor：活动标签的标签和图标颜色

示例：

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  navigationOptions: ({navigation}) => ({
        tabBarIcon: ({focused}) => {
            ...
        }
  }),
  tabBarOptions: {
        activeTintColor: '#ffffff',
  },
});

Answer 2

定义可变路线，
向每个添加道具侦听器，
使用可变路线更改tabBarLabel的颜色。

示例：

const [route, setRoute] = useState('home');
 

        <Tab.Navigator>
           <Tab.Screen listeners={{
                  tabPress: (e) => {
                    setRoute('home');
                  },
                }}
                options={{
                  tabBarLabel: (
                    <Text
                      style={{
                        color: route === 'home' ? 'ACTIVE_COLOR' : 'INACTIVE_COLOR',
                      }}>
                      home
                    </Text>
                  ) />
    
    <Tab.Screen listeners={{
                  tabPress: (e) => {
                    setRoute('profile');
                  },
                }}
                options={{
                  tabBarLabel: (
                    <Text
                      style={{
                        color: route === 'profile' ? 'ACTIVE_COLOR' : 'INACTIVE_COLOR',
                      }}>
                      profile
                    </Text>
                  ) />
    </Tab.Navigator>

希望我能为您提供帮助

如何更改活动/选定选项卡的颜色？

2 个答案: