react-native - 无法识别的字体系列 'ionicons' expo + native-base
问题描述
我正在使用带有本机基础的 expo,并且我一直在尝试加载图标,我在 ionicons 和 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
推荐阅读
- android - 任务 ':app:mergeDebugNativeLibs' 执行失败。在本机反应
- spring-batch - 我如何从 Spring Batch 中的 3 个不同的表中读取
- java - 以下哪项描述了 Scanner 方法 nextLine 的返回类型和参数?
- html - 滚动颜色变化
- semantic-ui - 如何在语义 UI 中根据设备、屏幕尺寸隐藏和显示元素?
- pyspark - pyspark 从在 azure 云上运行的数据块写入外部配置单元集群
- python - 我正在尝试编写一个 Python 代码来读取列表中的每个项目,并在某些条件下添加并找到该列表的平均值
- oop - Rust,相同类型,来自同一模块的不同导入的不同路径
- reactjs - 无法在反应中导入图像 - schema-utils 错误
- python - 腌制一个包含 __cinit__ 的 cython 类:__setstate__ vs __reduce__?