嵌套React Navigation中是否需多次调用addNavigationHelpers？

嘿，我来帮你理清这个问题！针对嵌套导航器的场景，确实需要在每个导航器层级都调用addNavigationHelpers，原因和具体操作如下：

核心原因 #

每个导航器（不管是外层的TabNavigator，还是嵌套在Tab里的StackNavigator等）都拥有独立的navigation state，Redux需要分别管理这些状态才能让每个导航器正确响应导航动作、同步状态。如果只在最外层调用一次，嵌套的导航器会无法和Redux状态联动，导致导航操作失效或状态不同步。

结合你的代码场景的具体操作 #

你的代码里已经定义了外层TabNavigator的路由配置，包含TabOneNavigation等嵌套导航器，接下来需要这么做：

• 为每个嵌套导航器创建独立的Redux reducer，用来管理它自身的navigation state。比如为TabOneNavigation、TabTwoNavigation分别创建对应的reducer。
• 在根reducer中合并所有导航器的reducer，示例如下：

import { combineReducers } from 'redux';
import tabNavReducer from './tabNavReducer';
import tabOneNavReducer from './tabOneNavReducer';
import tabTwoNavReducer from './tabTwoNavReducer';

const rootReducer = combineReducers({
  tabNav: tabNavReducer,
  tabOneNav: tabOneNavReducer,
  tabTwoNav: tabTwoNavReducer
});

• 为每个导航器创建容器组件，通过connect从Redux获取对应状态，并调用addNavigationHelpers生成navigation prop：
  • 外层TabNavigator的容器：

  import { connect } from 'react-redux';
  import { addNavigationHelpers } from 'react-navigation';
  import TabNavigator from './TabNavigator';
  
  const TabNavContainer = connect(state => ({
    navigation: addNavigationHelpers({
      dispatch: state.dispatch,
      state: state.tabNav
    })
  }))(TabNavigator);
  

  • 嵌套的TabOneNavigation的容器：

  import { connect } from 'react-redux';
  import { addNavigationHelpers } from 'react-navigation';
  import TabOneNavigation from './TabOneNavigation';
  
  const TabOneNavContainer = connect(state => ({
    navigation: addNavigationHelpers({
      dispatch: state.dispatch,
      state: state.tabOneNav
    })
  }))(TabOneNavigation);
  

• 更新你的路由配置，把容器组件作为screen传入上层导航器，比如：

const routeConfiguration = {
  TabOneNavigation: { screen: TabOneNavContainer },
  TabTwoNavigation: { screen: TabTwoNavContainer },
  TabThreeNavigation: { screen: TabThreeNavContainer }
};

这样每个导航器都能和Redux状态正确绑定，导航操作就能正常生效啦。

内容的提问来源于stack exchange，提问作者Felix