我使用的是带有原生库的expo，我一直在尝试加载图标，我在ionicon和anticon都遇到了这个问题。如果你看一下我的组件DidMount，我正在从原生库加载字体，并且在加载之前不会渲染图标。请注意，ttf文件位于本机基本/字体文件夹中
import React from "react";
import { Image, StyleSheet } from "react-native";
import { Header, Body, Left, Button, Right, Icon } from "native-base";
import * as Font from 'expo-font';
export default class NavigationBar extends React.Component {
state = {
loaded: false
}
async componentDidMount() {
await Font.loadAsync({
'Ionicons': require('native-base/Fonts/Ionicons.ttf'),
});
this.setState({ loaded: true});
}
render() {
return !this.state.loaded ? null : (
<Header style={styles.header}>
<Left>
<Button
active={true}
onPress={() => {
this.props.navigation.openDrawer();
}}
transparent
>
<Icon style={styles.Icon} name="menu" />
</Button>
</Left>
<Body />
<Right>
<Button
onPress={() => {
this.props.navigation.navigate("Profile");
}}
transparent
>
<Image
source={require("../assets/avatar.png")}
style={{ height: 25, width: 25 }}
/>
</Button>
</Right>
</Header>
);
}
}
我的依赖项如下：
"@expo/vector-icons": "^10.0.6",
"@react-native-community/masked-view": "^0.1.6",
"expo": "~36.0.0",
"expo-font": "~8.0.0",
"native-base": "^2.13.8",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-datepicker": "^1.7.2",
"react-native-gesture-handler": "^1.6.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-safe-area-view": "^1.0.0",
"react-native-screens": "^2.2.0",
"react-native-splash-screen": "^3.2.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.2.2",
"react-navigation-drawer": "^2.4.2",
"react-navigation-stack": "^2.2.2"
在经历了巨大的痛苦之后，我已经解决了这个问题。事实证明，您不应该使用AppRegistry.registerComponent来注册epxo应用程序。相反，您应该使用registerRootComponent。
我从更改了index.js中的以下行
AppRegistry.registerComponent('main', () => Main);
至
registerRootComponent(Main);
对于那些还没有做到这一点的人，在指定自定义入口点时，还必须更新app.json中应用程序的入口点：
"expo": {
"name": "project",
"slug": "project",
"entryPoint": "./index.js",
"privacy": "public",
"sdkVersion": "36.0.0",
"platforms": [
"ios",
"android",
"web"
],
这里有一个链接到我发现这个愚蠢的来源：
https://github.com/expo/vector-icons/issues/31#issuecomment-348374921