元素类型无效 React Native

Question

我已经遇到这个错误几个小时了，我不知道如何解决它，这让我发疯了。在这里的这个简码中，我不断收到此错误：

元素类型无效：需要字符串(对于内置组件( 或类/函数(用于复合组件(，但得到：未定义。你 可能忘记从定义组件的文件中导出组件， 或者，您可能混淆了默认导入和命名导入。

import * as Font from 'expo-font';
import React, {Component} from "react";
import { ActivityIndicator } from 'react-native'
import {Application} from "./src/Application.js";
class App extends Component {
constructor() {
super();
this.state = {
isReady: false,
};
}
componentWillMount = async() => {
await Font.loadAsync({
Roboto: require('./node_modules/native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('./node_modules/native-base/Fonts/Roboto_medium.ttf')
});
this.setState({isReady: true,});
};
render() {
if (!this.state.isReady) {
return <ActivityIndicator />
}
return (
<Application/>
);
}
}

export default App;

错误指向18:16中的_callee$，即这一行

this.setState({isReady: true,});

是什么原因导致这种情况和可能的解决方案？

我之前尝试在没有{}的情况下导入import {Application} from "./src/Application.js"，但它也返回了错误

检查_default的渲染方法

已编辑：添加了"应用程序.js">

import React from 'react';
import Root from "native-base";
import { createAppContainer } from '@react-navigation/native';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import Home from "./screens/home/index";
import Email from "./screens/email/index";
import ProfileScreen from "./screens/ProfileScreen";
import SideBar from "./screens/SideBar/SideBar";
const Drawer = createDrawerNavigator(
{
Home: { screen: Home},
//Email: { screen: Email},
ProfileScreen: { screen: ProfileScreen}
},
{
initialRouteName: "Home",
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <SideBar {...props}/>
}
);
const AppNavigator = createStackNavigator (
{
Drawer: {screen: Drawer}
},
{
initialRouteName: "Drawer",
headerMode: "none"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default () =>
<Root>
<AppContainer/>
</Root>

Answer 1

有了这个声明，

export default () =>
<Root>
<AppContainer/>
</Root>

不带括号，将解释为

export default () =>();
<Root>
<AppContainer/>
</Root>

因此，它将返回undefined该元素不是有效的反应元素。因此，将发生上述错误。

用()包装export default语句。它应该是

export default () =>( 
<Root> <AppContainer/></Root> 
);

或

export default () =>( <Root> <AppContainer/></Root> );

进口应该是

import Application from "./src/Application";

Answer 2

尝试

从"./src/application.js"导入 * 作为应用程序;

您不是在导出命名项，而只是在尝试导入命名项的函数字节。

Answer 3

检查是否从应用程序.js正确导出应用程序。 它应该只是"导出应用程序"。

Answer 4

您可能以错误的方式导入组件。

您如何在Application.js出口Application？

也许删除{}会修复它

import Application from "./src/Application.js";

有两种方法可以export/import

export function ...
// another file 
import {...} from '...'

或使用default导出

export default function ...
// another file
import ... from '...'

如果你想像这样导入它

import {Application} from "./src/Application.js";

你应该像这样导出它

export function Application...

如果你看吃了错误说的话...

。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。