fontFamily Material Icons 不是系统字体,必须通过 Exponent 加载
Posted
技术标签:
【中文标题】fontFamily Material Icons 不是系统字体,必须通过 Exponent 加载【英文标题】:fontFamily Material Icons is not a system font and has to be Loaded through 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 加载它。
【问题讨论】:
【参考方案1】:我认为您可能已经更改了您的 .babelrc
,您需要使用 babel-preset-expo
来让 react-native-vector-icons 与 Expo 一起使用。请参阅我为您整理的这个示例项目,我所做的只是使用create-react-native-app
对其进行初始化,然后添加您为图标提供的代码:https://github.com/brentvatne/***44811677
您的.babelrc
应如下所示:https://github.com/brentvatne/***44811677/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
【讨论】:
以上是关于fontFamily Material Icons 不是系统字体,必须通过 Exponent 加载的主要内容,如果未能解决你的问题,请参考以下文章
npm安装material-design-icons总是失败
scss 使用Google Material Icons作为之前和之后