如何修复 React-Native 中的错误“您可能忘记从文件中导出组件..etc”错误？答案

【问题标题】：How to fix Error 'You Likely forgot to export your component from the file..etc' error in React-Native?如何修复 React-Native 中的错误“您可能忘记从文件中导出组件..etc”错误？
【发布时间】：2019-04-13 03:59:19
【问题描述】：

我正在从另一个文件导入组件以在 App.js 文件中实现它，但 Unfornatuley 收到此错误：https://ibb.co/41ynFGX

这里的代码：https：（header.js 文件）：

import React from 'react';
import { Text } from 'react-native';

const Header = () => <Text> Hello Ahmed </Text>;


export default Header;

(App.js) 代码：

import React from 'react';
import { View } from 'react-native';
import Header from './src/components/header';

const App = () => (
    <View>

       <Header />

    </View>

);

export default App;

在这里运行良好（https://snack.expo.io/@ahmed105/tenacious-coffee），但是在我的设备上使用 atom 运行应用程序时出现错误。

任何帮助将不胜感激。

【问题讨论】：

我在你的定义中没有看到任何问题。你使用的 react 和 node 版本是什么？
React.14及以上版本基本支持React无状态函数定义，低版本可能不支持。
@Rahul react-native-cli 2.0.1 和节点：v11.13.0
非常感谢，这就是问题所在，我更新了 React 版本后一切顺利。
酷快乐编码:)

标签： javascript react-native expo

【解决方案1】：

嘿，把你的代码改成这样就可以了。

从“反应”导入反应；从'react-native'导入{文本}；

export default Header = () => {
    return (
        <Text>
            Hello Ahmed
        </Text>
    );
};

【讨论】：

如果您尝试从正确的位置导入它，请检查是否正确。您的文件夹结构。

【解决方案2】：

错误表明：

检查'App'的渲染方法

所以尝试将 App 导出为类组件，并将代码放入它的渲染方法中：

App.js

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

export default class App extends Component {
    render = () => {
        return (
            <View>
                <Header />
            </View>
        );
    }
}

【讨论】：

我试过了，但同样的问题仍然存在。

【解决方案3】：

错误已解决由于问题与代码本身无关，问题与React版本有关。正如@Rahul 所说：“React.14 及更高版本基本上支持 React 无状态函数定义，任何较低版本都可能不支持它。

所以我通过这个命令更新了 React：npm install react@latest 现在一切顺利。

【讨论】：

【解决方案4】：

如果您使用来自 expo 的 MapView，您可能会收到此错误。所以使用：react-native-maps

npm install react-native-maps --save-exact

yarn add react-native-maps -E

还有import MapView from 'react-native-maps';

【讨论】：