React-Native 无法解析字体模块 [英] React-Native can't resolve module for fonts

问题描述

我正在开始一个非常基本的构建.我在 pm 中使用了 `create-react-native-app' 和 yarn.

I'm starting a very basic build. I'm using `create-react-native-app' and yarn for pm.

从那里我试图完成的就是为一些 UI 元素加载native-base".

From there all I have tried to accomplish is to load in 'native-base' for some UI elements.

从 app.js 文件中，我唯一添加的是一个来自 native-base 的按钮组件.

From the app.js file the only thing I've added is a Button Component from native-base.

<代码><按钮><文本></文本></按钮>

并且已经包含了 native-base.

And have included native-base.

在收到一些无法解析模块'@expo/vector-icons'的错误后，我去安装了@expo/vector-icons，然后运行了反应原生链接.

After receiving some errors that it couldn't resolve module '@expo/vector-icons' I went and installed @expo/vector-icons, and for the hell of it ran react-native link.

现在可以找到@expo/vector-icons，但是找不到以Ionicons.ttf开头的字体.

Now it can find @expo/vector-icons but it can't find the fonts starting with Ionicons.ttf.

所以.从那里我将所有字体下载到 assets/fonts/ 目录，然后根据我在世博会网站上找到的一些文档将其包含在我的 app.js 文件中.

SO. From there I downloaded all the fonts to a assets/fonts/ directory and then included this in my app.js file based off some documentation I found on the expo site.

import { Font } from 'exponent';
///
export default class App extends React.Component {
  componentDidMount() {
    Font.loadAsync({
      'ionicons': require('./assets/fonts/Ionicons.ttf'),
    });
  }
///

推荐答案

我加载自定义字体的方式是将它们作为应用程序提供的字体列表添加到 Info.plist 文件中:

They way I load custom fonts is by adding them in the Info.plist file as a list of Font provided by the application:

他们还需要在构建阶段提供的资源中:

And they also need to be in the provided resources of the Build Phases:

之后，你就可以在 react native 中 CSS 的 fontFamily 属性中使用它了.确保在添加字体后再次清理并构建项目，以便将它们复制到设备.

After that, you can use it in the fontFamily property in CSS in react native. Make sure you also clean and build the project again after adding the fonts so they are copied to the device.

这篇关于React-Native 无法解析字体模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！