自定义react-navigation的TabBar

要自定义react-navigation的TabBar，你需要先创建一个自定义组件来代替默认的TabBar。你可以使用react-native的View和Text组件来创建一个自定义TabBar，然后使用react-navigation的TabNavigatorConfig来将自定义TabBar应用到你的TabNavigator上。

以下是一个简单的示例代码：

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';

const CustomTabBar = ({ navigation }) => {
  const { routes, index } = navigation.state;
  return (
    <View style={{ flexDirection: 'row', height: 56 }}>
      {routes.map((route, idx) => {
        const isFocused = index === idx;
        const tintColor = isFocused ? 'blue' : 'gray';
        return (
          <TouchableOpacity
            key={route.key}
            onPress={() => navigation.navigate(route.routeName)}
            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text style={{ color: tintColor }}>{route.routeName}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const TabNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
  {
    tabBarComponent: CustomTabBar,
  }
);

在这个示例中，我们创建了一个名为CustomTabBar的自定义组件，并将其作为tabBarComponent选项传递给TabNavigator。CustomTabBar接收一个navigation对象作为参数，然后使用它来渲染包含所有选项卡的视图。我们使用TouchableOpacity组件为每个选项卡创建可点击的区域，并在被选中时改变选项卡标题的颜色。