fontFamily Material Icons 不是系统字体，必须通过 Exponent 加载答案

【问题标题】：fontFamily Material Icons is not a system font and has to be Loaded through ExponentfontFamily Material Icons 不是系统字体，必须通过 Exponent 加载
【发布时间】：2017-06-28 20:07:40
【问题描述】：

我正在使用代码从 react-native-vector 图标导入图标：

import Icon from 'react-native-vector-icons/MaterialIcons';

似乎连接正确。我用来获取图标的代码是：

 <Tab              
     title={selectedTab === 'home' ? 'HOME' : 'Home'}
     renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='android' size={33} />}
     onPress={() => this.changeTab('home')}>
     <Text>Home</Text>
 </Tab>

我得到的完整错误是：

fontFamily 'Material Icons' 不是系统字体，尚未通过 Exponent.Font.loadAsync 加载。

如果您打算使用系统字体，请确保您输入的名称正确且受您的设备操作系统支持。
如果这是自定义字体，请务必使用 Exponent.Font.loadAsync 加载它。

【问题讨论】：

标签： reactjs react-native material-ui exponent expo

【解决方案1】：

我认为您可能已经更改了您的 .babelrc，您需要使用 babel-preset-expo 来让 react-native-vector-icons 与 Expo 一起使用。请参阅我为您整理的这个示例项目，我所做的只是使用create-react-native-app 对其进行初始化，然后添加您为图标提供的代码：https://github.com/brentvatne/StackOverflow44811677

您的.babelrc 应如下所示：https://github.com/brentvatne/StackOverflow44811677/blob/master/.babelrc

如果您想了解发生这种情况的原因，可以阅读此主题以获取更多信息：https://github.com/expo/vector-icons/issues/12

【讨论】：

你很高兴创建一个示例项目。我将 ["babel-preset-expo"] 行添加到我的预设中，现在一切正常。

【解决方案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 />;

    }

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

【讨论】：