Question

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

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

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

我也已经将expo-font导入到我的项目中，我只是这样调用fontFamily：

 <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

Answer 1

您没有Android文件夹，因此您似乎在使用Expo，而不是React Native.

所以我将向您展示如何做Expo。

获取下载的Open Sans zip文件，解压缩并复制 Montserrat-Regular.ttf到assets中的your project目录中。我们建议的位置是your-project/assets/fonts.
，您可以运行expo install expo-font
在App.js的应用程序代码中添加以下导入：import * as Font from 'expo-font';
expo库提供了一个API，用于访问以下组件的本机功能：您的JavaScript代码中的设备。字体是交易的模块与字体相关的任务。首先，我们必须从我们的字体中加载字体使用Font.loadAsync()的资产目录。我们可以在 App组件的componentDidMount()个生命周期方法。添加 App中的以下方法：现在，我们将字体文件保存到磁盘和导入的Font SDK，让我们添加以下代码：

export default class App extends React.Component {
  componentDidMount() {
    Font.loadAsync({
      'Montserrat-Regular': require('./assets/fonts/Montserrat-Regular.ttf'),
    });
  }

  // ...
}

这将加载Open Sans Bold并将其与'Montserrat-Regular'字体图中的名称Expo's关联。现在，我们只需要在Text组件中引用该字体。

注意：通过Expo加载的字体当前不支持fontWeight或fontStyle属性-您需要加载这些属性字体的变体，并按名称指定它们，就像我们在这里所做的那样粗体。

Answer 2

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

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

此外，您的风格将是这样； fontFamily: "Montserrat",代替fontFamily: "Montserrat-Regular"。

Answer 3

我设法解决了遇到的问题。似乎我需要花一点时间来加载字体，仍然不确定为什么这会给我带来问题，但是如果别人遇到同样的问题，这就是我现在的工作代码。

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

  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>

自定义字体未加载React-Native

3 个答案: