react-native - React Native Expo.Font.loadAsync 不加载 Material 图标

Question

我有一个 React Native，React 混合应用程序。对于 React Native，我使用的是 react-native-elements。

我的应用程序使用 Expo 运行，并使用 react-native init 构建。我得到了 Material Icons (missing) RSD;



通过大量搜索，我找到了@expo/vector-icons，但它似乎不起作用。我的 App.js 看起来像这样；

import React from 'react'
import { Font, AppLoading } from 'expo'
import { MaterialIcons } from '@expo/vector-icons'
import HybridApp from './src/App'

export default class NativeApp extends React.Component {
  constructor() {
    super()
    this.state = {
      fontsAreLoaded: false
    }
  }
  async componentWillMount() {
    await Font.loadAsync(MaterialIcons.font)
    this.setState({ fontsAreLoaded: true })
  }
  render() {
    const { fontsAreLoaded } = this.state
    return !fontsAreLoaded ? <AppLoading /> : <HybridApp />
  }
}

正如你所看到的，我正在等待字体加载......一切都无济于事。

Answer 1

经过几个小时的思考，答案一直在我面前。

据推测，React Native Elements 将 Material 图标称为 Material Icons ，不是 MaterialIcons .

这意味着默认导入来自 @expo/vector-icons不起作用，因为它们对 Material 图标的引用不同。

解决办法是手动从expo中选择Materialicons，替换这一行；

await Font.loadAsync(MaterialIcons.font)

和

await Font.loadAsync({
  'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf')
})

我希望这可以在将来为某人节省一些时间。