React native 自定义字体未加载

我正在尝试从项目中的“资源”文件夹加载自定义字体。我在网上查了一下，到目前为止，在完成了所有步骤之后，我仍然面临着同样的问题

我已将字体源添加到我的package.json文件中，如下所示：

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

 <Text style={{ textAlign: 'center', fontFamily: 'Montserrat-Regular', fontSize: 20 }}>Home</Text>

我也将expo字体导入到我的项目中，我只是这样称呼fontFamily：

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

 <Text style={{ textAlign: 'center', fontFamily: 'Montserrat-Regular', fontSize: 20 }}>Home</Text>

主页

我错过什么了吗

编辑：我忘了提到我在另一个屏幕上使用了自定义字体，完全一样……但是这个屏幕给了我问题

我使用的文件是Montserrat-Regular.tff、Montserrat-Bold.tff和Montserrate-Light.tff

---

这些文件的路径是MyProject/assets/fonts/MyFonts.ttf

从iOS文件夹中检查Info.plist文件并查找UIAppFonts键，您应该会看到类似的内容：

<key>UIAppFonts</key>
<array>
  <string>Montserrat Regular.ttf</string>
</array>

UIAppFonts
蒙特塞拉特

还有，你的风格会是这样的；

---

fontFamily:“蒙特塞拉特”

改为

fontFamily:“蒙特塞拉特常规”

您没有

Android

文件夹，所以看起来您使用的是

Expo

，而不是

React Native.

因此，我将向您展示如何举办

Expo

将下载的开放式Sans zipfile解压缩并复制

Montserrat Regular.ttf

进入

您的
项目

。我们推荐的位置是

您的项目/资产/字体。

您可以运行

expo安装expo字体

在

App.js

中的应用程序代码中添加以下导入：

import*作为“expo字体”中的字体

世博图书馆提供了一个API来访问的本机功能 从JavaScript代码中删除设备。Font是处理数据的模块 与字体相关的任务。首先，我们必须从 使用

Font.loadAsync（）

的资产目录。我们可以在未来几年内做到这一点

componentDidMount（）

应用程序组件的生命周期方法。添加 应用程序中的以下方法：现在我们已将字体文件保存到 磁盘和导入的字体SDK，让我们添加以下代码：

导出默认类App扩展React.Component{
componentDidMount（）{
Font.loadAsync({
“蒙特塞拉特常规”：要求（“./assets/font/Montserrat Regular.ttf”），
});
}
// ...
}

这将加载Open Sans Bold，并将其与

Expo的字体映射中的名称
'Montserrat-Regular'
相关联。现在，我们只需在
文本
组件中引用此字体

注意：通过Expo加载的字体当前不支持
fontWeight
或
fontStyle
属性，您需要加载这些属性
字体的变体，并按名称指定它们，正如我们在这里所做的
大胆的

我设法解决了我遇到的问题。似乎我需要给应用程序一点时间来加载字体，但仍然不确定为什么会出现这个问题，但下面是我的工作代码的样子，以防其他人也有同样的问题

这是我在试图加载自定义字体时添加到屏幕中的代码

  constructor(props) {
  super(props);
  this.state = {
  fontLoaded: false
}
}
 async componentDidMount(){
      await Font.loadAsync({
        'Montserrat': require('../assets/fonts/Montserrat.ttf'),
      }).then(() => {
      this.setState({fontLoaded: true})
    })

    }
<View>
{ this.state.fontLoaded == true ? (
        <Text style={{ fontSize: 40, fontFamily: 'Montserrat', color:'white', marginLeft: 10}}>Home</Text>
        ) : (<Text> Loading...</Text>)
      }
</View>

构造函数（道具）{
超级（道具）；
此.state={
错误：错误
}
}
异步组件didmount（）{
等待Font.loadAsync({
“蒙特塞拉特”：需要（“../assets/font/Montserrat.ttf”），
}).然后（（）=>{
this.setState（{fontLoaded:true}）
})
}
{this.state.fontloadded==true(
家
)：（加载…）
}
之后您是否使用了
react native link
？你看到android/app/src/main/assets/fonts/

中的字体了吗？我使用了

react-native链接，但仍然不走运。我的项目没有android文件夹。我还忘了提到我在另一个屏幕上使用自定义字体，它编译得很好。我不明白为什么这个屏幕会给我带来特别的问题。嘿，@FrankGully，你是在为iOS版本开发应用程序吗？我很感激详细的步骤。但是，这仍然不起作用：（我试着像这样将字体分配给我的文本：
Home
当我看到你的问题时，
Montserrat Regular
尝试保存字体文件。但是你现在尝试使用
Montserrat Bold
。你想注册什么？我的资产文件夹中有两个文件，我尝试了你提供的两种字体样式的方法。我只是想注册从需要加粗的文本中复制了我的代码。您可以编辑文件夹路径中的文件和代码并将其放到问题中吗？字体文件的扩展名为“it's
.ttf
。为什么您的文件
.ttff
？