运行反应本机应用程序时出错-检查`App`的渲染方法

Posted 2023-03-14

【中文标题】运行反应本机应用程序时出错-检查`App`的渲染方法

【英文标题】：Error running react native app - Check the render method of `App`

【发布时间】：2021-08-15 15:34:26

【问题描述】：

我在尝试运行 react native expo 应用程序时遇到错误。

错误：元素类型无效：应为字符串（对于内置 组件）或类/函数（用于复合组件），但得到： 不明确的。您可能忘记从文件中导出组件 它是在中定义的，或者您可能混淆了默认导入和命名导入。

查看App的渲染方法。

此错误位于： 在 App 中（由 ExpoRoot 创建） 在 ExpoRoot (在 renderApplication.js:45) 在 RCTView 中（在 View.js:34） 在视图中（在 AppContainer.js:106） 在 DevAppContainer 中（在 AppContainer.js:121） 在 RCTView 中（在 View.js:34） 在视图中（在 AppContainer.js:132） 在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 的 AppContainer（在 renderApplication.js:39）中 报告异常在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 在句柄异常中 node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in 处理错误在 node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 在 ErrorUtils.setGlobalHandler$argument_0 at [native code]:null in flushedQueue at [native code]:null in 调用CallbackAndReturnFlushedQueue

App.js

import 'react-native-gesture-handler';
import React, useState from 'react';
import * as Font from 'expo-font';
import  AppLoading  from 'expo';
import HomeStack from './routes/homeStack';

const getFonts = () => Font.loadAsync(
  'poppins-regular' : require('./assets/fonts/poppins/Poppins-Regular.otf'),
);

export default function App() 
const [fontsLoaded , setFontsLoaded] = useState(false);

if(fontsLoaded) 
 return (
   <HomeStack />
 );
 else 

  return (
   <AppLoading
   startAsync=getFonts
   onFinish=() => setFontsLoaded(true)
   />
  );
  

homeStack.js

import  createStackNavigator  from 'react-navigation-stack';
import  createAppContainer  from 'react-navigation';
import Login from '../screens/login';
import Dashboard from '../screens/dashboard';


const screens = 
 Login: 
     screen: Login
 ,
 Dashboard: 
     screen: Dashboard
 


const HomeStack = createStackNavigator(screens);

export default createAppContainer(HomeStack);

【问题讨论】：

您需要从类或功能组件中返回AppContainer。

【参考方案1】：

你需要从homeStack.js返回AppContainer

import React,  Component  from 'react';
import  createStackNavigator  from 'react-navigation-stack';
import  createAppContainer  from 'react-navigation';
import Login from '../screens/login';
import Dashboard from '../screens/dashboard';

export default class HomeStack extends Component
  render()
     return <AppContainer />
     


const screens = 
 Login: 
     screen: Login
 ,
 Dashboard: 
     screen: Dashboard
 


const homeStack = createStackNavigator(screens);

const AppContainer = createAppContainer(homeStack);

【讨论】：

试过这个，但它抛出错误，标识符'HomeStack'已经被声明。

@jack 哦，对不起！我没看到你已经用过HomeStack这个名字

谢谢，但它再次抛出与之前相同的错误。

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