不变违规：找不到＆＃34;存储＆＃34;在＆＃34; Connect（AuthScreen）＆＃34;的上下文或道具中

Question

不变违规：无法找到＆＃34;存储＆＃34;在＆＃34; Connect（AuthScreen）＆＃34;的上下文或道具中。将根组件包装在a中，或者显式传递＆＃34;存储＆＃34;作为＆＃34; Connect（AuthScreen）＆＃34;。

的道具

我该怎么做。让文学混乱。

这是我的AuthScreen代码

    import React from 'react';
import { Text, View } from 'react-native';
import { connect } from "react-redux";
import * as actions from "../actions";

class AuthScreen extends React.Component {
  componentDidMount() {
    this.props.facebookLogin();
  }

  render() {
    return (
      <View>
        <Text>AuthScreen</Text>
        <Text>AuthScreen</Text>
        <Text>AuthScreen</Text>
        <Text>AuthScreen</Text>
        <Text>AuthScreen</Text>
        <Text>AuthScreen</Text>
      </View>
    );
  }
}

export default connect(null, actions) (AuthScreen);

这是App.js

 import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator, createStackNavigator } from "react-navigation";
import { Provider } from "react-redux";

import store from "./store";
import WelcomeScreen from './screens/WelcomeScreen';
import AuthScreen from './screens/AuthScreen';
import DeckScreen from "./screens/DeckScreen";
import MapScreen from "./screens/MapScreen";
import ReviewScreen from "./screens/ReviewScreen";
import SettingsScreen from "./screens/SettingsScreen";

class App extends React.Component {
  render() {

    return (
      <Provider store={store}>
        <View style={styles.container}>
          <MainNavigation />
        </View>
      </Provider>
    );
  }
}
export default  MainNavigation = createBottomTabNavigator({
  Welcome: WelcomeScreen,
  auth: AuthScreen,
  main: createBottomTabNavigator({
    map: MapScreen,
    deck: DeckScreen,
    review: createStackNavigator({
      review: ReviewScreen,
      settings: SettingsScreen
    })
  })

});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

先谢谢..

Answer 1

在App.js中，正在导出MainNavigation而不是App，它是Provider的组件。似乎App根本没有呈现，因此默认导出应该移动到App以在执行此文件时包含Provider。然后Redux将能够看到您的商店。

export default class App extends React.Component {
  render() {

    return (
      <Provider store={store}>
        <View style={styles.container}>
          <MainNavigation />
        </View>
      </Provider>
    );
  }
}
const MainNavigation = createBottomTabNavigator({
  Welcome: WelcomeScreen,
  auth: AuthScreen,
  main: createBottomTabNavigator({
    map: MapScreen,
    deck: DeckScreen,
    review: createStackNavigator({
      review: ReviewScreen,
      settings: SettingsScreen
    })
  })

});

Answer 2

问题在于您是否只有App组件使用Provider的导航器，但您的应用结构中没有App。

请再次查阅文档 - https://reactnavigation.org/docs/en/redux-integration.html - 了解它是如何工作的。

解决方案最有可能是尼克提出的建议，但您需要指定Home路线，或设置正确的initialRouteName选项（https://reactnavigation.org/docs/en/bottom-tab-navigator.html）