我应该在嵌套反应导航中调用多个 addNavigationHelpers 吗？

Question

我正在关注 https://github.com/parkerdan/SampleNavigation 将 redux 与 react-navigation 集成。

我有一个问题：嵌套导航器是否应该多次调用addNavigationHelpers？

在示例中：

const routeConfiguration = {
    TabOneNavigation: { screen: TabOneNavigation },
    TabTwoNavigation: { screen: TabTwoNavigation },
    TabThreeNavigation: { screen: TabThreeNavigation },
    }

const tabBarConfiguration = {
    tabBarOptions:{
    activeTintColor: 'white',
    inactiveTintColor: 'blue', 
    activeBackgroundColor: 'blue', 
    inactiveBackgroundColor: 'white', 
    }
}
export const TabBar = TabNavigator(routeConfiguration,tabBarConfiguration);

<TabBar navigation={ addNavigationHelpers({ dispatch: dispatch, state: navigationState, }) } />

<NavigatorTabOne navigation={ addNavigationHelpers({ dispatch: dispatch, state: navigationState }) } />

<NavigatorTabTwo navigation={ addNavigationHelpers({ dispatch: dispatch, state: navigationState }) } />

<NavigatorTabThree navigation={addNavigationHelpers({ dispatch: dispatch, state: navigationState })} />

addNavigationHelpers 被调用 4 次，一次用于 TabNavigator，另外 3 次用于选项卡。 这是文件推荐的方式吗？

当您嵌套导航器时，导航状态会自动从一个导航器传递到另一个导航器。

Answer 1

究竟什么是 TabBar、NavigatorTabOne、NavigatorTabTwo...？

我想你有一些这样的代码：

export const TabBar = TabNavigator({
  NavigatorTabOne: { screen: NavigatorTabOne},
  NavigatorTabTwo: { screen: NavigatorTabTwo},
  NavigatorTabThree: { screen: NavigatorTabThree}
}, {
    initialRouteName: 'NavigatorTabOne',
  })

要创建你的根容器，你需要这个：

import { createReduxBoundAddListener, createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers';

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

const addListener = createReduxBoundAddListener("root");

class ReduxNavigation extends React.Component {
  render() {
    const { dispatch, nav } = this.props

    const navigation = ReactNavigation.addNavigationHelpers({
      dispatch,
      state: nav,
      addListener,
    });

    return <TabBar navigation={navigation} />
  }
}

这可能是你的减速器

const firstAction = TabBar.router.getActionForPathAndParams('NavigatorTabOne')
const initialState = TabBar.router.getStateForAction(firstAction)

export const reducer = (state = initialState, action) => {

  const nextState = TabBar.router.getStateForAction(action, state);

  return nextState || state;
};

无论如何，不​​要使用该存储库 The official react navigation doc does exist

如果你想使用一些东西来搭建你的 react native + redux + react 导航，你可以看看this project，它将在命令中创建应用程序库