导出默认的 react-native 组件答案

【问题标题】：Export default react-native component导出默认的 react-native 组件
【发布时间】：2019-05-08 00:52:51
【问题描述】：

对于我的解决方案，我希望用户从我的库中获取所有组件。

示例：import Checkbox from 'MyLibrary';

但对于本地人，我不想让所有组件都成为我自己。至少不是现在。这就是为什么我希望他们引用我的库，所以当我更改/编写组件时，它会在他们结束时自动更新。

例如，一个复选框。有一个默认的 react-native 复选框 (https://facebook.github.io/react-native/docs/checkbox)

我想在我的组件中导出这个默认组件。

我尝试过这样的事情：

export { Checkbox as default } from 'react-native';

和

import { Checkbox } from 'react-native';

export default Checkbox;

和

import React from 'react';
import { Checkbox as ReactCheckbox } from 'react-native';

const Checkbox = (...props) => <ReactCheckbox {...props} />;

export default Checkbox;

但这没有用。有什么建议吗？

编辑：我在导入时出错了，是 CheckBox 而不是 Checkbox...

【问题讨论】：

我可以详细说明我得到的错误： Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for complex components) but got:不明确的。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查App的渲染方法。

标签： reactjs react-native checkbox

【解决方案1】：

这是 CheckBox，不是 Checkbox，呵呵！

【讨论】：

【解决方案2】：

我不太确定，但是，当我尝试了您的代码时，它也不适用于我的代码。但是，你可以这样做：

import { TextInput as myTextInput } from 'react-native';

但是，当我在 expo 应用程序上检查时：

import { CheckBox as myCheckBox } from 'react-native';

据此，我认为 react native 不支持 Expo 应用程序上的 CheckBox。但是，如果您像 React Native Elements 或 Native Base 这样的库。然后你可以像这样导入复选框。

import { CheckBox as myCheckBox } from 'react-native-elements';

也许这个Snack 会帮助你。快乐编码:)

【讨论】：

【解决方案3】：

如果我的理解正确，您希望将 React/Community 复选框重新导出为您的组件，并在将来用您自己的组件替换它？

Native Checkbox 组件仅在 Android 中可用，因此您必须使用由 UI-Kitten/Native Base/React Native Element 构建的社区。p>

首先探索并选择您的 UI 库并安装它。然后你可以从相应的库中导入复选框组件并导出它，直到你编写自己的组件。

这会起作用

import { CheckBox } from 'react-native-elements';
export default CheckBox;

如果您想使用默认属性或样式包装组件，则可以执行以下操作

import { CheckBox } from 'react-native-elements';

export default function(props) {
    const yourProps = {
        checkedIcon: <Image source={require('../checked.png')} />,
        uncheckedIcon: <Image source={require('../unchecked.png')} />
    };
    return (
        <CheckBox {...yourProps} {...props} />
    );
}

【讨论】：