Question

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

我尝试

创建资产/字体，在其中可以找到我要使用的字体
我像这样在package.json中添加rnmp： “ rnmp”：{“资产”：[“ ./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加载

Answer 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调用中的等待。您必须使componentDidMount方法异步（异步componentDidMount（）{...}），然后在Font ...调用之前添加await。

希望这会有所帮助！

在React Native中加载自定义字体

1 个答案: