字体未加载到我的React-Native项目-Android中

问题描述

我认为重组我的RN项目以导出APK时出了点问题。这是问题所在：

我在其中一个组件中使用@ expo // vector-icons中的复选框和其他一些图标。

每次启动它时，都会丢失一种字体。羽毛，MaterialCommunityIcons，... 我在其他组件的搜索栏中也遇到了同样的问题。

我关闭应用中的错误后，复选框和图标看起来像

我真的很努力地修复它（几个小时），并以某种方式导入我的字体...

如果有人看到了什么地方不对，这就是我代码的开头...谢谢大家！

“ sdkVersion”：“ 35.0.0”，

    componentDidMount() {
        this.loadAssetsAsync()
      }
    
    loadAssetsAsync = async () => {
        await Font.loadAsync({
        MaterialCommunityIcons,Feather: require('../assets/Fonts/Feather.ttf'),FontAwesome: require('../assets/Fonts/FontAwesome.ttf'),'Material Icons': require('../assets/Fonts//MaterialIcons.ttf'),'MaterialIcons': require('../assets/Fonts//MaterialIcons.ttf'),'MaterialCommunityIcons': require('../assets/Fonts//MaterialCommunityIcons.ttf'),'Material-Community-Icons': require('../assets/Fonts//MaterialCommunityIcons.ttf'),})
      }

致命错误

警告

解决方法

字体在加载后之后异步加载。因此，在渲染组件的子代之前，您需要等待字体。所以您可以尝试类似

loadAssetsAsync = async () => {
    await Font.loadAsync({
    MaterialCommunityIcons,Feather: require('../assets/Fonts/Feather.ttf'),FontAwesome: require('../assets/Fonts/FontAwesome.ttf'),'Material Icons': require('../assets/Fonts//MaterialIcons.ttf'),'MaterialIcons': require('../assets/Fonts//MaterialIcons.ttf'),'MaterialCommunityIcons': require('../assets/Fonts//MaterialCommunityIcons.ttf'),'Material-Community-Icons': require('../assets/Fonts//MaterialCommunityIcons.ttf'),})
    this.setState({fontsLoaded: true})
  }

  render(){
      if(this.state.fontsLoaded){
          return(
            // Your component
          )
      }
      else{
          return(
            <View>
                <ActivityIndicator />
            </View>
          )
      }
  }