react-native - 如果聚焦，如何更改文本颜色？

Question

如果当前标签处于事件状态，我想更改文本颜色。我是怎么做到的？

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  BottomTabBar,
  createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';
import { FontAwesome as Icon, Entypo as Icon2 } from '@expo/vector-icons';
import { createStackNavigator } from '@react-navigation/stack';
import { TabBarAdvancedButton } from '../components';
import { EmptyScreen } from '../screens';
import { IS_IPHONE_X } from '../utils';

const BottomBar = createBottomTabNavigator();
const Stack = createStackNavigator();

type Props = {
  barColor: string,
};

export const TabBar: React.FC<Props> = ({ barColor }) => (
  <NavigationContainer>
    <BottomBar.Navigator
      tabBar={(props) => (
        <View style={styles.navigatorContainer}>
          <BottomTabBar {...props} />
          {IS_IPHONE_X && (
            <View
              style={[
                styles.xFillLine,
                {
                  backgroundColor: barColor,
                },
              ]}
            />
          )}
        </View>
      )}
      tabBarOptions={{
        style: styles.navigator,
        showLabel: true,
        labelStyle: {
          fontFamily: 'montserrat-regular',
          paddingBottom: 8,
          color: '#333',
        },
        tabStyle: {
          backgroundColor: barColor,
        },
      }}>
      <BottomBar.Screen
        name="Home"
        component={EmptyScreen}
        options={{
          tabBarIcon: ({ color, focused }) => (
            <Icon2 name="home" size={28} color={focused ? '#C71FF7' : color} />
          ),
        }}
      />
      <BottomBar.Screen
        name="Profile"
        component={EmptyScreen}
        options={{
          tabBarIcon: ({ color, focused }) => (
            <Icon name="user" size={28} color={focused ? '#C71FF7' : color} />
          ),
        }}
      />
      <BottomBar.Screen
        name="Rocket"
        component={EmptyScreen}
        options={{
          tabBarButton: (props) => (
            <TabBarAdvancedButton bgColor={barColor} {...props} />
          ),
        }}
      />
      <BottomBar.Screen
        name="Messages"
        component={EmptyScreen}
        options={{
          tabBarIcon: ({ color, focused }) => (
            <Icon name="wechat" size={28} color={focused ? '#C71FF7' : color} />
          ),
        }}
      />
      <BottomBar.Screen
        name="Settings"
        component={EmptyScreen}
        options={{
          tabBarIcon: ({ color, focused }) => (
            <Icon name="gear" size={28} color={focused ? '#C71FF7' : color} />
          ),
        }}
      />
    </BottomBar.Navigator>
  </NavigationContainer>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  navigatorContainer: {
    position: 'absolute',
    height: 60,
    bottom: 0,
    left: 0,
    right: 0,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
  },
  navigator: {
    borderTopWidth: 0,
    backgroundColor: 'transparent',
    elevation: 30,
    height: 60,
  },
  xFillLine: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 34,
  },
});

Answer 1

您可以使用 tabBarLabel 属性，它的工作方式类似于您的代码中使用的 tabBarIcon 属性。

options={{
  tabBarLabel: ({focused, color, size}) => (
    <Text style={{color: focused ? 'red' : color}}>Updates</Text>
  ),
}}

完整示例:

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        options={{
          tabBarLabel: ({focused, color, size}) => (
            <Text style={{color: focused ? 'red' : color}}>Updates</Text>
          ),
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons name="bell" color={color} size={size} />
          ),
        }}
        name="Home"
        component={HomeScreen}
      />
      <Tab.Screen
        options={{
          tabBarLabel: ({focused, color, size}) => (
            <Text style={{color: focused ? 'red' : color}}>Settings</Text>
          ),
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="account-settings"
              color={color}
              size={size}
            />
          ),
        }}
        name="Settings"
        component={SettingsScreen}
      />
    </Tab.Navigator>
  )
}

有关 Tab.Navigator 属性的更多详细信息:here