Question

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

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

这是我的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);
            });
    },
);

Answer 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 };

导出内容后，您现在可以import文件App.js上了：

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

或

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

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

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

希望它会有所帮助。

Answer 2

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

 class Test extends React.Component {
}

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

2 个答案: