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将材质图标称为break，不是 Material Icons。

这意味着MaterialIcons的默认导入不起作用，因为他们对材质图标的引用不同。

解决方案是从expo手动选择材料图标，替换此行;

@expo/vector-icons

与

await Font.loadAsync(MaterialIcons.font)

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

Answer 2

图标实际上是字体，必须先加载。它们似乎有时会自动加载，而其他时间则不然。

因此，为了确保它们已加载，请执行以下操作：

        import FontAwesome from './node_modules/@expo/vector-icons/fonts/FontAwesome.ttf';
        import MaterialIcons from './node_modules/@expo/vector-icons/fonts/MaterialIcons.ttf';
    ... 
      async componentWillMount() {
        try {
          await Font.loadAsync({
            FontAwesome,
            MaterialIcons
          });

          this.setState({ fontLoaded: true });
        } catch (error) {
          console.log('error loading icon fonts', error);
        }
      }
...
  render() {

    if (!this.state.fontLoaded) {

      return <AppLoading />;

    }

然后，当您引用类型时，它必须与您正在使用的组件所期望的类型相同。

例如，反应原生元素需要这些类型：材料社区，字体真棒，octicon，ionicon，粉底，evilicon，简单线图标，zocial或entypo

请在此处查看完整答案： http://javascriptrambling.blogspot.com/2018/03/expo-icon-fonts-with-react-native-and.html

Answer 3

这个问题很旧，但是对我有用并且很简单的是

import { Ionicons } from "@expo/vector-icons";
await Font.loadAsync({...Ionicons.font, ...other imports })

Answer 4

检查您在运行应用程序时是否有任何依赖警告。我有一个 expo-font 版本警告，当我修复它时，这个错误消失了。

Some dependencies are incompatible with the installed expo package version:
 - expo-font - expected version range: ~8.4.0 - actual version installed: ^9.1.0