React Native 0.61.5版本CLI添加字体及react-native link使用疑问

先搞懂：为啥不用react-native link了？ #

从RN 0.60版本开始，官方就推出了**自动链接（Autolinking）**机制，大部分原生依赖和资源（包括字体）都不需要手动跑react-native link了。这个旧命令在新版本里不仅没用，还可能搞出问题——比如对已经自动链接好的模块重复执行链接操作，会在iOS的Info.plist或者Android的build.gradle里生成冗余配置，轻则编译报错，重则导致资源重复冲突。所以别再用它处理字体啦！

手动添加字体的步骤（全程不用react-native link） #

下面是针对0.61.5的具体操作：

1. 规整字体文件 #

先把你的字体文件（.ttf或.otf格式）放到项目里，建议专门建个assets/fonts文件夹统一管理，路径就是项目根目录/assets/fonts/，把所有字体都丢进去就行。

2. 配置react-native.config.js #

在项目根目录下创建（如果没有的话）react-native.config.js文件，写入以下配置：

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

这一步是告诉RN的自动链接工具：“嘿，我的字体在这儿呢！”

3. 执行资源链接命令 #

虽然不用react-native link，但得跑个专门的命令让原生项目识别字体：

npx react-native-asset

要是还没装react-native-asset工具，先执行npm install -g react-native-asset或者yarn global add react-native-asset搞定它。

4. 在代码里用起来 #

现在就可以直接在样式里调用字体了，举个例子：

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.customText}>这是用自定义字体写的文本</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  customText: {
    fontSize: 24,
    fontFamily: 'Roboto-Regular', // 这里填字体的实际名称，不是文件名！比如字体叫"Roboto-Regular"就写这个
  },
});

export default App;

小提醒：不知道字体正确名称的话，Mac上双击字体文件就能看到，Windows右键看属性里的“字体名称”就行。

不小心用了react-native link怎么办？ #

如果之前手滑跑了这个命令，得检查下iOS的Info.plist和Android的build.gradle文件，看看有没有重复的字体配置项，手动删掉冗余的部分，不然可能会出现“资源重复”的编译错误。

内容的提问来源于stack exchange，提问作者Ankush Rishi