自定义字体未加载 React-Native

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

我已经将字体的来源添加到我的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

您没有Android文件夹，因此看起来您使用的是Expo，而不是React Native.

所以我会告诉你如何做Expo.

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

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

这将加载 Open Sans 粗体，并将其与字体映射中的名称'Montserrat-Regular'相关联Expo's。现在我们只需要在Text组件中引用此字体即可。

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

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

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

另外，你的风格将是这样的; fontFamily: "Montserrat",反而fontFamily: "Montserrat-Regular".

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

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

  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>

相关内容

最新更新

热门标签：