Question

我的代码有什么问题，为什么不将字体添加到我的应用程序中

我遇到此错误fontFamily“ open-sans”不是系统字体，并且尚未通过Font.loadAsync加载。

如果要使用系统字体，请确保输入正确的名称，并且设备操作系统支持该名称。

从“反应”中导入React；从'react-native'导入{View，Text}; 从'expo'导入{字体};

this.state = { fontLoaded：否， }

我正在使用Font.loadAsync我写错了吗？

async componentDidMount() {
      await Font.loadAsync({
        'OpenSans-Bold': require('./assets/fonts/OpenSans-Bold.ttf')
      }).then(() => {
        this.setState({ fontLoaded: true });
      });
    }
return (

     <View style={styles.container}>
     { this.state.fontLoaded === true ? (
       <React.Fragment>
</React.Fragment>
    ) : (<Text style={styles.inputText}>Loading... </Text>)
  }
      </View>
inputText: {
  fontSize: hp('3%'),
  color: '#5D5D5D',
  fontWeight: 'bold',
  paddingVertical: hp('0.5%'),
  paddingLeft: wp('6.5%'),
  fontFamily: 'open-sans'

},

我的pacakadge.json文件

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "rnpm": {
      "assets": [
     "./assets/fonts/"
      ]
    }

}

Answer 1

必须从SDK 33安装Expo的内置模块。因此，您必须安装字体模块。

您可以运行expo install expo-font

您注册的字体名称与要使用的字体名称不同。条件语句是错误的。加载字体后，使文本可见。

更改字体名称

import * as Font from 'expo-font';
...
this.state={
   fontLoaded: false
}
async componentDidMount() {
      await Font.loadAsync({
        'OpenSans-Bold': require('./assets/fonts/OpenSans-Bold.ttf')
      });

        this.setState({ fontLoaded: true });

    }
return (

     <View style={styles.container}>
     { this.state.fontLoaded !== true ? (
       <React.Fragment>
</React.Fragment>
    ) : (<Text style={styles.inputText}>Loading... </Text>)
  }
      </View>
inputText: {
  fontSize: hp('3%'),
  color: '#5D5D5D',
  fontWeight: 'bold',
  paddingVertical: hp('0.5%'),
  paddingLeft: wp('6.5%'),
  fontFamily: 'OpenSans-Bold'

},

我正在使用Font.loadAsync，但仍然收到错误fontFamily“ open-sans”不是系统字体，并且尚未通过Font.loadAsync加载

1 个答案: