如何将 React Navigator 包装在 redux 存储中？

Question

在我的 app.js 文件中，我有一个 Navigator，我尝试将其包装在 redux 存储中，以便控制整个应用程序的状态。但我收到此错误：

“不变违规：此导航器缺少导航道具。在react-navigation v3和v4中，您必须直接设置应用程序容器。”

如何正确地将我的导航器包装在 Redux 存储中以便我可以使用它？

应用程序.js

import React from 'react';
import { registerRootComponent } from 'expo';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';


import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunkMiddleware from 'redux-thunk'
import reducer from './store/reducers'

// Components
import Home from './Screens/Home';
import Landing from './Screens/Landing';
import Tasks from './Screens/Tasks';
import Login from './Screens/Login';

const middleware = applyMiddleware(thunkMiddleware)
const store = createStore(reducer, middleware)

const Navigator = createStackNavigator({
    Tasks: {screen: Tasks},
    Landing: {screen: Landing},
    Home: { screen: Home },
    

});


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

Answer 1

我知道如何实现这一点。下面是更新后的代码，我的应用程序包装在商店容器中。

import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunkMiddleware from 'redux-thunk'
import reducer from './store/reducers'

// Components
import Home from './Screens/Home';
import Landing from './Screens/Landing';
import Tasks from './Screens/Tasks';
import Login from './Screens/Login';

const middleware = applyMiddleware(thunkMiddleware)
const store = createStore(reducer, middleware)

const Navigator = createStackNavigator({
    Tasks: {screen: Tasks},
    Landing: {screen: Landing},
    Home: { screen: Home },
    

});

//ADDED THIS
const App_1 = createAppContainer(Navigator);


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