9-2 RN之字体图标与底部标签图标在本节中，我们将学习如何使用字体图标，并完成底部标签栏图标的配置。一、字体图标库的

在本节中，我们将学习如何使用字体图标，并完成底部标签栏图标的配置。

一、字体图标库的选择

在 React Native 项目中，常用的字体图标库是 react-native-vector-icons。该库功能强大，但会将所有字体图标打包进应用，即使只使用了少量图标，也会增加应用体积。对于需要使用自定义图标的情况，该库的配置较为繁琐。

因此，我们选择使用 react-native-iconfont-cli，这是一个命令行工具，可以将 iconfont 图标转换为 React 标准组件，不依赖字体文件，支持多色彩图标。该工具更加灵活，适合使用自定义图标。

二、使用阿里巴巴图标库

1. 创建项目

访问阿里巴巴图标库网站。
创建一个新项目，搜索所需图标（如“首页”、“购物车”等），将其添加到购物车并加入项目。

2. 安装依赖

在项目中安装以下依赖：

yarn add react-native-svg
yarn add react-native-iconfont-cli -D

3. 配置 iOS 项目

cd ios && pod install

4. 生成配置文件

在项目根目录下运行以下命令，生成 iconfont.json 配置文件：

npx iconfont-init

5. 配置 `iconfont.json`

在阿里巴巴图标库项目中，点击 Symbol，复制代码并确保以 http: 开头。
将代码粘贴到 iconfont.json 文件中。
设置以下选项：
- use_typescript: true
- outputDir: './src/assets/iconfont'（保存组件的路径）
- trim_icon_prefix: ''（图标前缀为空）

6. 生成图标组件

运行以下命令生成图标组件：

npx iconfont-rn

三、在项目中使用图标

1. 设置底部导航栏图标

在底部导航器中，为每个标签配置对应的图标：

import Icon from './src/assets/iconfont';

const BottomTabNavigator = createBottomTabNavigator();

<BottomTabNavigator>
  <BottomTab.Screen
    name="Home"
    component={HomeScreen}
    options={{
      tabBarLabel: '首页',
      tabBarIcon: ({ color, size }) => (
        <Icon name="icon-shouye" color={color} size={size} />
      ),
    }}
  />
  <BottomTab.Screen
    name="Discover"
    component={DiscoverScreen}
    options={{
      tabBarLabel: '发现',
      tabBarIcon: ({ color, size }) => (
        <Icon name="icon-faxian" color={color} size={size} />
      ),
    }}
  />
  <BottomTab.Screen
    name="Cart"
    component={CartScreen}
    options={{
      tabBarLabel: '购物车',
      tabBarIcon: ({ color, size }) => (
        <Icon name="icon-shoucang" color={color} size={size} />
      ),
    }}
  />
  <BottomTab.Screen
    name="Profile"
    component={ProfileScreen}
    options={{
      tabBarLabel: '我的',
      tabBarIcon: ({ color, size }) => (
        <Icon name="icon-user" color={color} size={size} />
      ),
    }}
  />
</BottomTabNavigator>

2. 动态添加新图标

如果需要添加新图标，只需在阿里巴巴图标库项目中添加新图标，生成新的链接，然后运行以下命令即可：

npx iconfont-rn

四、总结

在本节中，我们学习了如何使用 react-native-iconfont-cli 工具，将自定义图标转换为 React Native 组件，并在底部导航栏中使用这些图标。通过这种方式，可以有效减少应用体积，同时方便管理和使用自定义图标。

下一节，我们将学习顶部标签导航器的使用。

9-2 RN之字体图标与底部标签图标