如何在 React Native 中正确导入/导出组件？答案

【问题标题】：How to properly import/export components in React Native?如何在 React Native 中正确导入/导出组件？
【发布时间】：2018-09-12 21:47:12
【问题描述】：

我正在尝试导出初始组件，但我一直收到Invariant Violation 错误：

有没有更好的方法来导出我的 HMAPP 组件并将其导入 App.js 中？

错误图片： Error screen

这是我的 App.js：

import HMAPP from './app/HMAPP';

export default HMAPP;

这是我的 HMAPP 组件：

 import { Provider } from 'react-redux';
import { persistStore } from 'redux-persist';
import { Navigation } from 'react-native-navigation';
import Mapbox from '@mapbox/react-native-mapbox-gl';

import { registerScreens } from './screens';
import store from './store/configureStore';
import { appInit, getInitialScreen } from './appInit';
import { handleErrorObject } from './lib/handleError';

Mapbox.setAccessToken('pkaeda324234');

const persistor = persistStore(
    store,
    null,
    () => {
        registerScreens(store, Provider);

        appInit(store)
            .then(() => {
                const initialScreen = getInitialScreen(store.getState());

                Navigation.startSingleScreenApp({
                    screen: {
                        screen: initialScreen,
                    },
                    passProps: {
                        persistor,
                    },
                    drawer: {
                        left: {
                            screen: 'DrawerMenuScreen',
                        },
                    },
                    appStyle: {
                        orientation: 'portrait',
                    },
                });
            })
            .catch((error) => {
                handleErrorObject('Error initializing app', error);
            });
    },
);

【问题讨论】：

您是否从./app/HMAPP 导出任何内容？
不，它只是用于持久存储和初始导航
如果没有导出，您如何尝试导入任何内容？
我正在尝试查找其他人制作的错误。当它不是组件时如何导出它，它只是常量。如果你有，你可以检查代码并给出解决方案
您可以导出变量（const 或其他变量）并再次导入。这是常规的 Javascript。这取决于你如何使用这个变量。在错误中，它清楚地表明这是一个出口问题。我不知道你打算如何使用它，但 React 等待正确的导出/导入，你在哪里使用它。

标签： reactjs react-native

【解决方案1】：

根据export 和import 的文档，要在一个.js 文件中外部化某些内容，您需要使用export。导出模块后，您可以import他并在其他 .js 文件中的任何位置使用。

因此，在您的HMAP.js 文件中，您需要像这样export 您的const：

const persistor = persistStore( ... )
export default persistor;

如果你想导出多个，你可以像这样导出一个对象：

const persistor = persistStore( ... )
const persistor2 = persistStore2( ... )
export { persistor, persistor2 };

导出内容后，您现在可以在您的 App.js 文件中 import 它：

import persistor from './app/HMAPP'; // use it when you exported with "default"

或

import { persistor1, persistor2 } from './app/HMAPP';

您还可以导入该文件中的所有内容：

import * as persistors from './app/HMAPP';

希望对你有所帮助。

【讨论】：

【解决方案2】：

在 React Native 中，如果您想在其他父组件中使用您的子组件，那么您必须导出该子组件并在父组件中导入子组件。别的，你只用类名声明你的组件，但是这样你就不能在任何地方使用该组件。例如：

 class Test extends React.Component {
}

【讨论】：