reactNative 版本＞ 0.7 手动配置iconfont

背景：

React Native 0.60+ 版本已经弃用了 react-native link 命令。你需要手动将字体文件添加到项目中。以下是手动配置的方法：

1、准备字体文件

从 Iconfont 网站下载字体文件并解压，获取 .ttf 文件，例如 iconfont.ttf。

2、将字体放进项目

将 iconfont.ttf 文件放在项目的 assets/fonts 目录中。如果 assets/fonts 目录不存在，请创建它。

3、配置react-native.config.js

在项目根目录创建或修改 react-native.config.js 文件，添加字体文件配置

module.exports = {
  assets: ['./assets/fonts']
};

Android 配置

1、在你的项目的 android/app/src/main/assets 目录中创建一个 fonts 文件夹，如果不存在的话

2、将 iconfont.ttf 文件复制到这个 fonts 文件夹中。

3、android/app/build.gradle 代码配置

project.ext.vectoricons = [
    iconFontNames: [ 'iconfont.ttf' ] // 指定你的字体文件名
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

ios 配置

1、打开你的项目 ios 目录中的 .xcworkspace 文件

2、在 Xcode 中，右键点击项目名称，选择 Add Files to "Your Project Name"

3、选择 iconfont.ttf 文件并确保目标是你的项目，并且勾选 Copy items if needed 选项

4、在 Info.plist 文件中添加一个新的键值对，将字体文件添加到 UIAppFonts 键下

<key>UIAppFonts</key>
<array>
  <string>iconfont.ttf</string>
</array>

继续react 代码配置：

在项目中创建一个文件 CustomIcon.js，并使用 createIconSet 函数创建自定义图标组件：

import { createIconSet } from 'react-native-vector-icons';
import glyphMap from './glyphMap.json'; // 确保路径正确

const CustomIcon = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');

export default CustomIcon;

确保 glyphMap.json 文件包含从 Iconfont 生成的 Unicode 对应关系，例如

{
  "icon-cash": 58925,
  "icon-share": 58924,
  "icon-sport": 57396,
  "icon-youxi1": 58922
}

使用：

import React from 'react';
import { View, Text } from 'react-native';
import CustomIcon from './CustomIcon';

const MyComponent = () => {
  return (
    <View>
      <Text>
        <CustomIcon name="icon-cash" size={30} color="#900" />
        现金图标
      </Text>
    </View>
  );
};

export default MyComponent;