React Native Expo.Font.loadAsync不会加载材质图标

Question

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

我的应用程序使用Expo运行,并使用react-native init构建.我得到材料图标(缺少)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手动选择Material icons,替换此行;

await Font.loadAsync(MaterialIcons.font)

同

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

我希望将来能节省一些时间.