React-Native 中的不变违规

Question

我是 React Native 的新手。 当我在 Android 模拟器上运行项目时，会显示此错误。 我尝试了很多解决方案，但都没有奏效。

错误日志：

不变违规：元素类型无效：
期望一个字符串（用于内置组件）或一个类/函数 （对于复合组件）但得到：未定义。

LoginForm.js 代码：

import React, {Component} from 'react';
import {View} from 'react-native';
import {Button,Card,CardSection} from './components'

 class LoginForm extends Component{

    render(){

        return(
           <Card>

               <CardSection>
                   <Button>
                       Log in
                   </Button>
               </CardSection>

           </Card>
        );
    }
}

export default LoginForm;

App.js 代码：

import React,{Component} from 'react';
import {View} from 'react-native';
import {Header} from './components';
import LoginForm from './components';

 class App extends Component{



    render(){

        return(

            <View>
                <Header headertext="Test"/>
                <LoginForm />
                </View>


        );
    }
}

export default App;

index.js

import { AppRegistry } from 'react-native';
import App from './src/App';

AppRegistry.registerComponent('second', () => App);

组件/index.js

export * from './Button';
export * from './Card';
export * from './CardSection';
export * from './Header';

Answer 1

在您的 components/index.js 中，您将导出除 LoginForm.js 之外的所有内容

因此，当您从 App.js 中的“./components”导入 LoginForm 时，它会在 index.js 文件中查找并且找不到默认导出。

您可以在您的components/index.js 中添加export * from "./LoginForm"，并在App.js 中将其作为命名导入导入，例如：import {LoginForm} from "./components"。

或者你可以直接import LoginForm from "./components/LoginForm"。