在本机反应中加载自定义字体答案

【问题标题】：Load customised font in react native在本机反应中加载自定义字体
【发布时间】：2019-06-12 17:56:17
【问题描述】：

我想在我的应用中加载自定义字体。

我试试这个

创建一个资产/字体，您可以在其中找到我想使用的字体
我像这样在 package.json 中添加 rnmp： "rnmp": { "assets": ["./assets/fonts/"] }
我这样链接：react-native 链接

然后我像这样使用我的字体： fontFamily: "Lato-Light",

{

 "main": "node_modules/expo/AppEntry.js",
 "scripts": {
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "eject": "expo eject"
  },
 "dependencies": {
     "expo": "^32.0.6",
     "react": "16.5.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk- 
 32.0.0.tar.gz",
 "react-navigation": "^3.11.0"
 },
"devDependencies": {
     "babel-preset-expo": "^5.0.0"
},
"rnmp": {
     "assets": ["./assets/fonts/"]
},
"private": true
}

字体应该被加载但我得到这个错误：

"fontFamily" "Lato-Light" 不是系统字体，没有通过 Font.loadAsync 加载

【问题讨论】：

标签： react-native fonts

【解决方案1】：

我假设您在这个项目中使用 expo。正如您所显示的错误所说，您只需在应用程序加载过程中加载所需的字体。在您的 App.js 文件中，将要使用的字体导入为 const，然后添加异步调用以将它们加载到应用程序中。您可以使用以下代码：

//In  the import section
import {Font} from 'expo';
const Light = require('./assets/fonts/Lato-Light.ttf');

//In the componentDidMount
await Font.loadAsync({
    'Lato-Light': Light
});

注意 Font.loadAsync 调用中的 await。您必须使 componentDidMount 方法异步 (async componentDidMount() {...})，然后在 Font... 调用之前添加 await。

希望这会有所帮助！

【讨论】：