fontFamily Material Icons 不是系统字体,必须通过 Exponent 加载
fontFamily Material Icons is not a system font and has to be Loaded through Exponent
我正在使用代码从 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加载它。
我想你可能已经改变了你的 .babelrc
,你需要使用 babel-preset-expo
让 react-native-vector-icons 与 Expo 一起工作。请参阅我为您整理的这个示例项目,我所做的只是使用 create-react-native-app
对其进行初始化,然后添加您为图标提供的代码:https://github.com/brentvatne/Whosebug44811677
您的 .babelrc
应如下所示:https://github.com/brentvatne/Whosebug44811677/blob/master/.babelrc
如果您想了解发生这种情况的原因,可以阅读此主题以获取更多信息:https://github.com/expo/vector-icons/issues/12
图标实际上是字体,必须先加载。似乎它们有时是自动加载的,有时不是。
因此,要确保它们已加载,请执行以下操作:
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
我正在使用代码从 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加载它。
我想你可能已经改变了你的 .babelrc
,你需要使用 babel-preset-expo
让 react-native-vector-icons 与 Expo 一起工作。请参阅我为您整理的这个示例项目,我所做的只是使用 create-react-native-app
对其进行初始化,然后添加您为图标提供的代码:https://github.com/brentvatne/Whosebug44811677
您的 .babelrc
应如下所示:https://github.com/brentvatne/Whosebug44811677/blob/master/.babelrc
如果您想了解发生这种情况的原因,可以阅读此主题以获取更多信息:https://github.com/expo/vector-icons/issues/12
图标实际上是字体,必须先加载。似乎它们有时是自动加载的,有时不是。
因此,要确保它们已加载,请执行以下操作:
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