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

如果你想使用一些东西来搭建你的反应原生+ redux +反应导航，你可以看看this project，它将在命令中创建app base

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

1 个答案: