Question

嗨，我在本机应用程序中遇到了这个问题：我也用博览会永久违反：在上下文或以下环境中均找不到“存储” “ Connect（App）”的道具。可以将根组件包装在，或将“商店”作为道具明确传递给“ 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);

我不知道问题出在哪里！

configureStore文件：

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（入口点）看起来像这样

"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*

我留下一个更清晰的记录。祝你好运！

商店中的ReactNative App问题

1 个答案: