reactjs - 使用 redux 响应 Native 导航 v3

Question

我正在尝试使用 redux 设置 React navigation v3。在 react 导航文档中，我可以成功设置导航，并且无需添加 redux 即可正常工作。但是，当我尝试添加我的 redux class App extends React.Component{...} 时并连接我的操作，它会抛出以下错误:

不变违规:不变违规:在“Connect(AuthScreen)”上下文中找不到“store”。将根组件包装在 中，或者将自定义 React 上下文提供者传递给连接选项中的 Connect(AuthScreen) 并将相应的 React 上下文使用者传递给 Connect(AuthScreen)。

App.js

const MainNavigator = createBottomTabNavigator({
  welcome: { screen: WelcomeScreen },
  auth: { screen: AuthScreen },
  main: {
    screen: createBottomTabNavigator({
      map: { screen: MapScreen },
      deck: { screen: DeckScreen },
      review: {
        screen: createStackNavigator({
          review: { screen: ReviewScreen },
          settings: { screen: SettingsScreen }
        }) 
      }
    })
  }
});

const AppContainer = createAppContainer(MainNavigator);

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


export default AppContainer;

这是我想要将 redux 连接到的 AuthScreen:

class AuthScreen extends Component {
    componentDidMount(){
        console.log('This is this.props in AuthScreen:')
        console.log(this.props);
        this.props.facebookLogin();
    }
    render(){
        return(
            <View>
                <Text>AuthScreen</Text>
            </View>
        )
    }
}

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

我怀疑我不被允许包裹 <Provider>像这样的应用程序容器周围的标签，有人可以提供一些关于如何完成此操作的见解吗？

Answer 1

这是一个帮助您开始使用 React Navigation 3.x 和 Redux 的简单示例:

App.js

import React, {Component} from 'react';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';

import Reducers from './src/Reducers';

import Preload from './src/screens/Preload';

let store = createStore(Reducers);

const AppNavigator = createStackNavigator({
  Preload: {
    screen: Preload,
  },
});

const AppContainer = createAppContainer(AppNavigator);

export default class App extends Component {
  render () {
    return (
        <Provider store={store}>
          <AppContainer/>
        </Provider>
    )
  }
}