商店中的 React Native App 问题

Question

您好，我的 React 本机应用程序遇到了这个问题：我也用世博会不变违规：无法在上下文中找到 "store" 或 "Connect(App)" 的道具。将根组件包装在 , 或者显式地将 "store" 作为 prop 传递给 "Connect(App)".

我的 index.js 文件：

import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider } from 'react-redux';
import App from './App';
import configureStore from './src/store/configureStore';

const store = configureStore();

class Root extends React.Component {
render() { 
    return ( 
        <Provider store={store}>
            <App />
        </Provider>
    )
}
}

 AppRegistry.registerComponent('Root', () => Root);

不知道哪里出了问题!!!

配置存储文件：

import { createStore, combineReducers } from 'redux';

import placesReducer from './reducers/places';

const rootReducer = combineReducers({
    places: placesReducer
});

const configureStore = () => {
    return createStore(rootReducer);
};

export default configureStore;

App.js 文件：

import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import { connect } from "react-redux";

import PlaceInput from "./src/components/PlaceInput/PlaceInput";
import PlaceList from "./src/components/PlaceList/PlaceList";
import PlaceDetail from "./src/components/PlaceDetail/PlaceDetail";
import {
  addPlace,
  deletePlace,
  selectPlace,
  deselectPlace
} from "./src/store/actions/index";

class App extends Component {
  placeAddedHandler = placeName => {
    this.props.onAddPlace(placeName);
  };

  placeDeletedHandler = () => {
    this.props.onDeletePlace();
  };

  modalClosedHandler = () => {
    this.props.onDeselectPlace();
  };

  placeSelectedHandler = key => {
    this.props.onSelectPlace(key);
  };

  render() {
    return (
      <View style={styles.container}>
        <PlaceDetail
          selectedPlace={this.props.selectedPlace}
          onItemDeleted={this.placeDeletedHandler}
          onModalClosed={this.modalClosedHandler}
        />
        <PlaceInput onPlaceAdded={this.placeAddedHandler} />
        <PlaceList
          places={this.props.places}
          onItemSelected={this.placeSelectedHandler}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 26,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "flex-start"
  }
});

const mapStateToProps = state => {
  return {
    places: state.places.places,
    selectedPlace: state.places.selectedPlace
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onAddPlace: name => dispatch(addPlace(name)),
    onDeletePlace: () => dispatch(deletePlace()),
    onSelectPlace: key => dispatch(selectPlace(key)),
    onDeselectPlace: () => dispatch(deselectPlace())
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

package.json 文件：

{
  "name": "awesome-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.14.0",
    "jest-expo": "~27.0.0",
    "react-test-renderer": "16.3.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "^27.0.1",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-20.0.0.tar.gz",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0"
  }
}

`

Answer 1

正如 SGhaleb 在评论中指出的那样，您的问题是您错过了导出 Root 组件，但它必须作为默认值导出。

export default class Root extends React.Component {

如果添加默认导出后错误没有解决...考虑这个

我在重现这个问题时发现了这个问题。我运行最新的create-react-native-app
在这种情况下 package.json 内的主要（入口点）看起来像这样

"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",

这给我带来了一个问题，因为 index.js 文件被忽略了 并且根目录中的 App.js 被用作入口点。

The workaround for this was 
    1 - move the App.js into the *src* folder 
    2 - update the import reference in the *index.js* file.
        ```import App from './src/App';```
    3 - rename *index.js* to *App.js*

为了更清楚，我留下一张截图。祝你好运！

商店中的 React Native App 问题

ReactNative App issue in the store

store

reactjs

react-native

redux

react-redux