使用 react-navigation 和 Redux 在 React Native 中进行复杂导航答案

【问题标题】：Complex navigation in React Native using react-navigation and Redux使用 react-navigation 和 Redux 在 React Native 中进行复杂导航
【发布时间】：2017-11-09 18:40:39
【问题描述】：

我的 React Native 应用中有以下导航结构：

StackNavigator 配置了 3 个路由：

启动画面（React 组件）
StackNavigator 我的登录流程
DrawerNavigator 用于我的核心应用屏幕。

DrawerNavigator 有一些动态多条路由，但也有一条静态路由，即另一条StackNavigator。一切似乎都按预期工作：

商店正在相应更新。
屏幕作品之间的导航。
在每个组件中配置后，在屏幕工作之间返回，使用以下命令：
```
this.props.navigation.goBack();
```

我的问题是 - 有没有办法让我在全球范围内处理 Android 上的后退按钮？目前，当我单击后退按钮时，没有任何反应（由于我使用的是 Redux）。我应该处理每个组件中的后退按钮，还是有办法使用 Redux 来处理？

【问题讨论】：

标签： react-redux react-native-android react-navigation

【解决方案1】：

有点晚了，但是有一种方法可以用 redux 来处理这个问题。在您创建商店的index.js 文件中，您可以导出一个类并添加一个componentWillMount 调用来处理调度对您的redux 操作的调用。只需记住在上面导入您需要的操作即可。

const store = configureStore();

export default class Index extends Component {
  componentWillMount = () => {
      BackHandler.addEventListener('hardwareBackPress', () => {
          const { nav: { routes } } = store.getState();
          const currentRouteName = routes[routes.length-1].routeName;

          if (currentRouteName === 'EditCoupleProfile') {
              store.dispatch(editCoupleActions.navigateBack())
          } else if ( currentRouteName === 'EditInterests' ) {
              store.dispatch(interestsActions.navigateBack())
          } else {
              store.dispatch(popFromStack());
          }
          return true;
      })
  };

  componentWillUnmount = () => {
      BackHandler.removeEventListener('hardwareBackPress');
  };

  render() {
      return (
          <Provider store={store}>
              <AppWithNavigation />
          </Provider>
      );
   }
}

【讨论】：