如何在我的 React Native 项目中添加自定义 TTF 字体？

Question

我正在尝试将自定义 TTF 字体添加到我的 React Native 项目中，我已经关注了文章：

1）我在根目录中创建了一个文件夹，并将 vincHand.ttf 放入其中：

projectName/assets/fonts/vincHand.ttf

2）我已经执行了这个命令：

react-native link

然后我检查了一下，字体已转移到 android 路径右侧

3）我已经卸载了 Genymotion 中的应用程序，并再次执行了此命令：

react-native run-android

但是在 fontFamily: 'vincHand' 之后，文本以默认字体显示......

考虑一下，我从这里下载了这个字体：

https://www.dafont.com/vinchand.font

Answer 1

您应该确保两件事：

第一件事是你已经在 package.json 中定义了它

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
},

React-Native 会自动将字体复制到

android/app/src/main/assets/fonts

第二件事是在 Info.plist 中定义它

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

然后运行

react-native link

对于使用案例：

const styles = StyleSheet.create({
  welcome: {
    fontFamily: "vincHand",
    fontSize: 30,
    textAlign: "center",
    margin: 10
  }
});

祝你好运！

Answer 2

1. 在项目的根文件夹中创建资产文件夹。
2. 在assets文件夹中创建fonts文件夹。
3. 将所有字体粘贴到字体文件夹中。
4. 在 package.json 文件中添加以下代码。
5. 运行下面提到的命令

react-native 链接

6. 字体将安装在两个平台（IOS 和 Android）上。

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
},

Answer 3

ios 和 android（不含展会）：

1 - 创建一个名为“assets”的文件夹，在其中创建“fonts”文件夹并将所有 ttf 文件放入其中。

2 - 在根目录中创建一个名为：

react-native.config.js

的文件并将其插入：

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

3 - 运行此命令：

npx react-native link

Answer 4

我知道这是一个旧线程，但以防万一有人发现它有用。

我遵循了 HDT 的说明，包括 kouhadi 关于使用

react-native.config.js

的提示，但它对我不起作用（我正在使用 React Native

v0.75.2

）。

所做的工作是在设置字体后运行以下命令：

npx react-native-asset 此命令重新链接资源，运行后，我的自定义字体按预期工作。

注意： 这对于最新版本的 React Native 可能是必要的（如 v0.75.x

），因为如果没有此手动步骤，自动链接可能并不总是会拾取字体。