ReactNative系列之图标组件react-native-vector-icons的使用

一、前言

        第三方网站提供了丰富的矢量图 icon，这些图可以在我们的应用中被引入使用，这里介绍react-native-vector-icons 控件的使用。

        我的 RN 版本是 v0.76.8 ，我并没有和别的教程一样去 /android/app/build.gradle 中修改添加，不知道是不是我的版本的原因...

---

二、安装、配置

yarn add react-native-vector-icons @types/react-native-vector-icons

1、去 android/app/src/main/ 目录下创建 /assets/fonts 目录（一般是没有的需要自己创建）

2、/node_modules/react-native-vector-icons/Fonts 文件中复制要使用的 .ttf 文件到 第一步中的 fonts目录下。

---

三、使用

        因为我在 react-native 中只使用了 react-native-vector-icons/Ionicons 和 react-native-vector-icons/FontAwesome 两个，所以只在 Fonts 中添加了这两个，如果用到别的也可以继续添加进去。

const Tab = createBottomTabNavigator();
export default function TabBar() {
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        // eslint-disable-next-line react/no-unstable-nested-components
        tabBarIcon: ({focused, color, size}) => {
          let iconName: string;
          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Product') {
            iconName = focused ? 'rocket' : 'rocket-outline';
          } else if (route.name === 'ShoppingCart') {
            iconName = focused ? 'cart' : 'cart-outline';
          } else if (route.name === 'Mine') {
            iconName = focused ? 'person' : 'person-outline';
          } else if (route.name === 'ProtogenesisPage') {
            iconName = focused ? 'aperture' : 'aperture-outline';
          }
          return <Ionicons name={iconName} size={size} color={color} />;

          // You can return any component that you like here!
        },
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
      })}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Product" component={Product} />
      <Tab.Screen name="ShoppingCart" component={ShoppingCart} />
      <Tab.Screen name="Mine" component={Mine} />
      <Tab.Screen name="ProtogenesisPage" component={ProtogenesisPage} />
    </Tab.Navigator>
  );
}