react-native - 如何将我的 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>
         )
     }
 }

标签： react-nativereact-reduxredux-store

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>
         )
     }
 }