我在 native 基础上使用 expo，我一直在尝试加载图标我在 ionicons 和 anticon 上都遇到过这个问题。如果您查看我的 componentDidMount，我正在从 native 库加载字体，并且在加载图标之前不会呈现图标。请注意 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"
],
这是我发现这个 tomfoolery 的来源的链接:
https://github.com/expo/vector-icons/issues/31#issuecomment-348374921
关于react-native - 无法识别的字体系列 'ionicons' expo + native-base，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60488109/