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

Question

我想往我的React Native项目中添加自定义的TTF字体，我已经按照以下文章进行了操作：

1）我在我的根目录下创建了一个文件夹，并把vincHand.ttf放进去：

projectName/assets/fonts/vincHand.ttf

2) 我执行了这个命令：

react-native link

我已经确认字体已经正确传输到了安卓路径。

3) 我在Genymotion中卸载了该应用程序，然后再次执行了此命令：

react-native run-android

但是在 fontFamily: 'vincHand' 属性后，该文本会显示默认字体...

考虑到这一点，我已经从这里下载了这个字体：

- user10179106

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
  }
});

祝你好运！

- HDT

---

我看到并且已经完成了这些步骤！正如你所知，Info.plist 只适用于 iOS，而我正在使用 Android。但是在完成这些步骤之后，问题仍然存在... - user10179106

Answer 2

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

react-native link

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

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

- Sukhdeep Singh Kalra

---

你能重新检查一下 package.json 文件中定义的文件夹名称和路径吗？ - Sukhdeep Singh Kalra

Answer 3

针对 iOS 和 Android（不使用 Expo）：

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

2 - 在根目录下创建一个名为：react-native.config.js的文件，并在其中添加以下内容：

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

3 - 运行以下命令：npx react-native link

- Mrkouhadi