'组件异常' React Native答案

【问题标题】：'Component exception' React Native'组件异常' React Native
【发布时间】：2021-04-22 17:27:05
【问题描述】：

我从我的一个旧项目中复制了我的代码，因此它应该能够工作。但是，我认为当我创建新项目时，它不小心更新了版本，导致它彻底出错。这是我的代码：

import React, {useState} from 'react';
import { Text, View } from 'react-native';
import * as Font from 'expo-font';
import { AppLoading} from 'expo-app-loading';
import {enableScreens} from 'react-native-screens'
//import from libraries

import TabNavigation from './Navigation';
//import TabNavigation

enableScreens();



const fetchFonts = () => {
  return Font.loadAsync({
    'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),
    'open-sans-bold' : require('./assets/fonts/OpenSans-Bold.ttf')
  });
  //fetch fonts from the folder so that we can style the title
};

export default function App() {
  const[fontLoaded, setFontLoaded] = useState(false);

  if(!fontLoaded){
    return (
    <AppLoading 
    startAsync ={fetchFonts}
     onFinish={()=> setFontLoaded(true)}
    />
    
    );
  }
  //this will ensure that the font will always be loaded.

  return( 
 
  <TabNavigation />

);
   
  
}

我正在尝试做的事情是运行这个程序，然后返回所有导航过程工作的导航。

这是错误：组件异常元素类型无效：应为字符串（对于内置组件）或类/函数（对于完整组件），但得到：未定义。您可能忘记从中导出组件。定义它的文件，或者您可能混淆了默认导入和命名导入。检查'App'的渲染方法。

【问题讨论】：

您能否仔细检查您是否从“导航”模块（第 8 行导入）导出了 TabNavigation 组件？
是的，我有。 @sandmann
你能提供一个包含你代码的最小版本的演示仓库吗？

标签： reactjs react-native react-navigation render

【解决方案1】：

你不需要这样做fetchFonts方法加载字体。如果您正确安装了字体，您只需将属性fontFamily 放在任何样式中，并将字体名称作为其值，例如：textStyle:{ fontFamily: 'Montserrat-Bold' } 为了更好地理解，您可以查看此link。

【讨论】：

你有没有按照tutorial在React-Native中添加字体？

【解决方案2】：

更改应用加载的导入从'expo-app-loading'导入AppLoading；

【讨论】：

【解决方案3】：

首先，打开终端，进入项目目录。

其次，运行以下命令安装expo-app-loading模块：

expo-app-loading

第三，将模块导入到你的 App.js 文件中：

import AppLoading from 'expo-app-loading';

在 Expo 4.9.0 上测试

【讨论】：