react-native - React-navigation-redux-helpers 错误 : This navigator has both navigation and container props, 所以不清楚它是否应该拥有自己的状态

Question

我正在尝试在 react-native with expo 中使用 react-navigation-redux-helpers 将 redux 与 react-navigation 集成。但是，尽管我遵循了文档，但我收到以下错误。

这个导航器有导航和容器属性，所以不清楚它是否应该拥有自己的状态。删除 Prop :如果导航器应该从导航 Prop 中获取其状态，则为“nav”。如果导航器应保持其自身状态，请不要传递导航 Prop 。

以下是我与 redux 和 react-navigation 实现相关的代码。

AppNavigator.js

import React from 'react';
import {createSwitchNavigator, createStackNavigator} from 'react-navigation';
import {connect} from 'react-redux';
import {reduxifyNavigator,createReactNavigationReduxMiddleware} from "react-navigation-redux-helpers";

import MainTabNavigator from './MainTabNavigator';


export const AuthStack = createStackNavigator(
    {
        Main: MainTabNavigator,
    },
    {
        headerMode: 'none'
    }
);

export const AppNavigator = createSwitchNavigator(
    {
        Auth: AuthStack,
    },
    {
        headerMode: 'none',
        initialRouteName: 'Auth',
    }
);


export const NavMiddleware = createReactNavigationReduxMiddleware(
    "root",
    state => state.nav,
);

const addListener = reduxifyNavigator(AppNavigator, 'root');


const mapStateToProps = state => ({
    nav: state.nav,
});

export const AppWithNavigationState = connect(mapStateToProps)(addListener);

App.js

import React from 'react';
import {Platform, StatusBar, StyleSheet, View} from 'react-native';
import {AppLoading, Asset, Font, Icon} from 'expo';
import {AppWithNavigationState}  from './navigation/AppNavigator';
import {applyMiddleware, createStore} from "redux";
import AppReducer from './reducers/AppReducer'
import {Provider} from "react-redux";
import {NavMiddleware} from './navigation/AppNavigator'

const store = createStore(AppReducer,applyMiddleware(NavMiddleware));

export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };

  render() {

    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <Provider store={store}>
              <AppWithNavigationState/>
          </Provider>
        </View>
      );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        require('./assets/images/robot-dev.png'),
        require('./assets/images/robot-prod.png'),
      ]),
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Icon.Ionicons.font,
        // We include SpaceMono because we use it in HomeScreen.js. Feel free
        // to remove this if you are not using it in your app
        'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
      }),
    ]);
  };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
    console.warn(error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}

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

navReducer.js

import {AppNavigator} from '../navigation/AppNavigator';

const router = AppNavigator.router;
const mainNavAction = router.getActionForPathAndParams('Auth');
const initialNavState = router.getStateForAction(mainNavAction);


const NavigationReducer = (state = initialNavState, action) => {
    console.log('routes', router);
    return router.getStateForAction(action, state) || state;

};

export default NavigationReducer;

AppReducer.js

"use strict";

import {VendorReducer} from './vendorReducer';
import {combineReducers} from "redux";
import NavigationReducer from "./navReducer";

const AppReducer = combineReducers({
    nav:NavigationReducer,
    vendor: VendorReducer,
});

export default AppReducer;

以下是我的 package.json。

{
  "name": "my-new-project",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "test": "node ./node_modules/jest/bin/jest.js --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "2.1.1",
    "expo": "^30.0.1",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
    "react-navigation": "2.16.0",
    "react-navigation-redux-helpers": "2.0.6",
    "react-redux": "5.0.7",
    "redux": "4.0.0",
    "redux-logger": "3.0.6",
    "redux-thunk": "2.3.0"
  },
  "devDependencies": {
    "jest-expo": "30.0.0",
    "redux-devtools": "3.4.1"
  }
}

我希望有人能帮助我度过难关。提前致谢。

Answer 1

这也是我的错!通过以下方式解决:

const mapStateToProps = state => ({
  state: state.nav,
});

注意状态:state.nav。

如果您需要，我可以发布我的整个 redux 集成与适合我的导航。