React-navigation-redux-helpers 错误：此导航器同时具有导航和容器道具，因此不清楚它是不是应该拥有自己的状态

Posted 2023-02-19

【中文标题】React-navigation-redux-helpers 错误：此导航器同时具有导航和容器道具，因此不清楚它是不是应该拥有自己的状态

【英文标题】：React-navigation-redux-helpers error : This navigator has both navigation and container props, so it is unclear if it should own its own stateReact-navigation-redux-helpers 错误：此导航器同时具有导航和容器道具，因此不清楚它是否应该拥有自己的状态

【发布时间】：2019-03-16 03:38:48

【问题描述】：

我正在尝试在 react-native 与 expo 中使用 react-navigation-redux-helpers 将 redux 与 react-navigation 集成。但是，尽管我按照文档进行操作，但出现以下错误。

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

以下是我与 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"
  

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

【参考方案1】：

这也是我的错！通过以下方式解决：

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

注意状态：state.nav.

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

【讨论】：

我不敢相信它成功了！我不明白为什么哈哈非常感谢