如何在我的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. 在资源文件夹中创建字体文件夹。
3. 将所有字体粘贴到字体文件夹中。
4. 将以下提到的代码添加到package.json文件中。
5. 运行下面提到的命令

  

本机链接

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

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