我正在使用具有本地基础的expo，并且在尝试加载图标时一直受困，我在ionicon和anticon上都遇到了这个问题。如果您查看我的componentDidMount，我是从本机库中加载字体，并且直到它被加载后才渲染图标。注意ttf文件位于native-base / Fonts文件夹中
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