如何在自己的文件中正确实现React Native中的自定义组件?

Question

我已经将自定义React Native组件的代码移动到它自己的文件中，如下所示:

import React from 'react';
import { StyleSheet, Text, View } from "react-native";
export default class MyButton extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Text style={{fontSize: 20, color: "#008000"}}>Foo Bar</Text>
);
};
};

在App.js中，我可以引用包含该代码的文件。框架没有抱怨:

import { MyButton } from "./MyButton";

但是只要我在App渲染功能中包含MyButton，我就会收到以下错误:

错误:元素类型无效:期望是字符串(对于内置组件)或类/函数(对于组合组件)，但得到:未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

错误信息的其余部分是完全无用的。

我在网上搜索了一下，想知道是什么原因导致了这个错误。但我发现的所有线索似乎都与我的案子无关。例如，我使用import React from 'react';，其中是建议的一些答案，甚至在这里的堆栈溢出，但这仍然不起作用。(参见:React Native中未定义的自定义组件)

如果我将代码移动到App.js，一切工作正常。如果我把它移到另一个文件，事情就不工作了。为了在该文件中成功地拥有一个组件，我需要在该文件中更改什么?并以类似的方式包括这些本地组件在我的App.js?

谢谢你的帮助!

Answer 1

您的import语句不正确。

import { MyButton } from "./MyButton";

这个import语句导入一个名为的从./MyButton模块导出称为MyButton。但是，在您的MyButton文件中，您是默认导出MyButton组件。你要做的是:

import MyButton from "./MyButton";

导入默认情况下从模块导出的内容，在本例中是MyButton组件。