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

我已经将自定义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";

但是，一旦我将其包含MyButton在App呈现功能中，就会收到以下错误：

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

错误消息的其余部分完全没有用。

我在网上进行了一些搜索，以了解可能导致该错误的原因。但是我发现的所有提示似乎都与我的案子无关。例如，我使用import React from 'react';它是由一些答案甚至建议在这里堆栈溢出，但却仍不能工作。（请参阅：React Native中未定义的自定义组件）

如果我将代码移至App.js一切正常。如果我将其移动到另一个文件，则无法正常工作。为了成功在该文件中包含组件，我需要在该文件中进行哪些更改？并以与我的本机组件类似的方式包括在内App.js吗？

感谢您的帮助！