无法识别的字体系列 'ionicons' expo + native-base答案

【问题标题】：Unrecognized font family 'ionicons' expo + native-base无法识别的字体系列 'ionicons' expo + native-base
【发布时间】：2020-03-02 11:39:40
【问题描述】：

我正在使用带有原生基础的 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"

【问题讨论】：

你是怎么解决的？

标签： react-native expo native-base

【解决方案1】：

经过巨大的痛苦，我已经解决了这个问题。事实证明，您不应该使用 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

【讨论】：

我必须把registerRootComponent(Main);放在哪里？