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

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

1 个答案: