javascript - 如何在我的 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
  }
});

祝你好运!