字体系列材料图标不是系统字体，必须通过Exponent加载

问题描述

我正在使用代码从反应原生向量图标导入图标：

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加载它。

推荐答案

我认为您可能已经更改了.babelrc，您需要使用babel-preset-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