将 Redux 与 react-native 一起使用时出现不变违规错误答案

【问题标题】：Invariant Violation error when using Redux with react-native将 Redux 与 react-native 一起使用时出现不变违规错误
【发布时间】：2018-10-27 21:10:53
【问题描述】：

当我在手机上运行我的 react React Native & Expo 应用程序时，会显示以下错误：

Invariant Violation：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。您可能忘记从定义组件的文件中导出组件。

代码是：

import React from 'react'
import View from 'react-native'

import { Provider } from "react-redux";
import configureStore from "./redux/store";
const { store } = configureStore();


export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <View>
          ...
        </View>    
      </Provider>
    );
  }
}

文件 ./redux/store 是：

import { applyMiddleware, createStore } from "redux";
import { persistStore, persistCombineReducers } from "redux-persist";
import storage from "redux-persist/lib/storage";
import thunk from "redux-thunk";
import user from "./userActions";

const middlewares = [thunk];

const persistConfig = {
  key: "root",
  storage
};

const reducer = persistCombineReducers(persistConfig, {
  user
});

const configureStore = () => {
  let store = createStore(reducer, applyMiddleware(...middlewares));
  let persistor = persistStore(store);
  return { store, persistor };
};

export default configureStore;

我正在使用的依赖项是：

"@babel/core": "^7.1.2",
"eslint": "^5.6.0",
"expo": "^30.0.1",
"native-base": "^2.8.1",
"react": "^16.5.2",
"react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
"react-redux": "^5.1.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0"

我哪里错了？

更新：更改 App.js 代码解决了该问题。新代码是

import React from "react";
import { AppLoading } from "expo";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/es/integration/react";
import configureStore from "./redux/configureStore";

import AppContainer from "./components/AppContainer";

const { persistor, store } = configureStore();

class App extends React.Component {
  state = {
    isLoadingComplete: false
  };

  render() {
    const { isLoadingComplete } = this.state;
    if (!isLoadingComplete) {
      return (
        <AppLoading
          startAsync={this._loadAssetsAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    }
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <AppContainer />
        </PersistGate>
      </Provider>
    );
  }

  _handleLoadingError = error => {
    console.log(error);
  };

  _handleFinishLoading = async () => {
    this.setState({
      isLoadingComplete: true
    });
  };
}

export default App;

【问题讨论】：

标签： react-native redux expo redux-persist

【解决方案1】：

您的这部分代码不正确！

import View from 'react-native'

改成这样：

import { View } from 'react-native'

我希望这会奏效:)

【讨论】：