所以我在Android设备/模拟器上遇到了这个错误:

Error message on emulator

另一方面,在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"
  }
}

我的apply.json:

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

我的字体.应用程序中的loadAsync方法.文档中实现的js:

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> 
    )
  }
}

非常感谢.任何帮助都将不胜感激!

推荐答案

好吧,我终于解决了这个问题.

问题在于,iOS和Android显然需要为要加载的字体指定不同的名称.

我加载的简单线条图标只适用于iOS,所以在安卓系统上我遇到了以下错误:

最后我加载了简单的线条图标和简单的图标,指向同一个目录,如下所示:

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>
    )
  }

这个公认丑陋的解决方案暂时解决了我的问题.

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

希望这对任何人都有帮助.

React-native相关问答推荐

如何将S的此API输出输出到平面列表中?控制台将数据及其可视记录到平面列表中,但我无法输出到平面列表中

React native + react-query + onError 不捕获并处理错误?

React Native:任务 ':app:checkDebugDuplicateClasses' 执行失败

React Native:如何以编程方式对图像进行黑白过滤?

axios 在react native 中给出 [AxiosError: Network Error]

如何在 react-navigation v6 中更改标题高度

如何在 React Native 的嵌套 Touchable 中传播touch 事件?

react-native StyleSheet 属性和选项列表

React Native TextInput 没有获得焦点

React Native StackNavigator 初始路由名称

请求无法完成,因为您已超出配额

RNFS.exists() 总是返回 TRUE

Soundcloud API /stream 端点给出 401 错误

如何在 React Native For Android 中删除启动画面后的白屏

如何解决此错误您可能需要适当的加载程序来处理此文件类型

无法在 react native >= 0.60 中链接assets(字体)

在 React Native 中,如何使用浅渲染测试我的组件?

react-native 中的倒数计时器

React.createClass vs. ES6 箭头函数

列之间的 React Native FlatList 分隔符