React Native-Expo：fontFamily'SimpleLineIcons'不是系统字体，并且尚未通过Font.loadAsync加载

Question

所以我在Android设备/模拟器上收到此错误：

另一方面，在iOS上，它可以正常编译，并且simple-line-icons可以正确显示。

我正在运行最新版本的expo。

我的package.json：

{
  "name": "FamScore3",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.14.0",
    "jest-expo": "^31.0.0",
    "react-test-renderer": "16.3.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@firebase/auth": "^0.7.6",
    "@firebase/database": "^0.3.6",
    "axios": "^0.18.0",
    "metro-react-native-babel-preset": "^0.45.0",
    "expo": "^31.0.4",
    "firebase": "^5.5.1",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
    "react-native-elements": "^0.19.1",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-router-flux": "^4.0.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  }
}

我的app.json：

{
  "expo": {
    "sdkVersion": "31.0.0"
  }
}

我在App.js中实现的Font.loadAsync方法已在文档中实现

export default class App extends Component {

  state = {
    fontLoaded: false
  }

  async componentDidMount() {
    try {

      await Font.loadAsync({
        amaticBold: require('./assets/fonts/amaticSC-Bold.ttf'),
        indieFlower: require('./assets/fonts/indieFlower.ttf'),
        'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
        'simple-line-icons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf')

      })

      this.setState({ fontLoaded: true })

    } catch (error) {
      console.log('error loading fonts', error);
    }

  }

  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk))

    if (!this.state.fontLoaded) {
      return <AppLoading />
    }

    return (
      <Provider store={store}>
        <Router />
      </Provider> 
    )
  }
}

非常感谢。任何帮助将非常感激！ 我被困了一段时间。

Answer 1

我遇到了同样的问题并且在这个错误上浪费了很多时间。这是 2021 年，有更好的方法来做同样的事情，所以不要使用下面的代码

>>> encode_pair(47, -53)
-9995
>>> encode_pair_cryptic(47, -53)
-9995

正确的做法是

Font.loadAsync({
    'MyAwesomeFont': require('./path/to/MyAwesomeFont.ttf')
})

如果您想进一步解释，请查看官方文档 here

Answer 2

好的，所以我终于设法解决了这个问题。

问题在于，iOS和Android显然需要不同的名称来加载字体。

我加载的简单行图标仅适用于iOS，因此在Android上出现此错误： fontFamily'SimpleLineIcons'不是系统字体，并且尚未通过Font.loadAsync加载。

我最终加载了simple-line-icons和SimpleLineIcons，并指向相同的目录，如下所示：

componentDidMount() {
    this.loadAssetsAsync()
  }

  loadAssetsAsync = async () => {
    await Font.loadAsync({
      amaticBold: require('./assets/fonts/amaticSC-Bold.ttf'),
      indieFlower: require('./assets/fonts/indieFlower.ttf'),
      'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
      'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
      'SimpleLineIcons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf'),
      'simple-line-icons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf')
    })
    this.setState({ fontLoaded: true })
  }

  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk))

    if (!this.state.fontLoaded) {
      return <AppLoading />
    }

    return (
      <Provider store={store}>
        <Router />
      </Provider>
    )
  }

这个公认的丑陋解决方案暂时解决了我的问题。 确保您键入的内容与错误提示完全一样。 如果错误是： fontFamily'MyAwesomeFont'不是系统字体... 然后，您真的需要为其命名：

Font.loadAsync({
    'MyAwesomeFont': require('./path/to/MyAwesomeFont.ttf')
})

希望这对在那里的人有帮助。

Answer 3

我遇到了同样的问题，我发现将字体名称更改为您命名的字体名称可以解决问题：

// Before
'my-awesome-font': require('./path/to/my-awesome-font.ttf')

// After
'MyAwesomeFont': require('./path/to/my-awesome-font.ttf')

可能是无法使用的破折号。

Answer 4

我在使用 @react-native-render-html 时遇到了这个错误，它渲染了从其他 cms 生成的 Html，如果内容创建者使用自定义字体，这会导致字体系列问题。

所以为了解决这个问题，我在 html 渲染器中使用了 ignoredStyles 功能， 然后设置baseFontStyle使文本内容看起来统一。

代码：

import HTML from "react-native-render-html"`

<HTML ignoredStyles={['fontFamily']} baseFontStyle={[fontFamily: 'nunito-regular', fontSize: 16]} />