Question

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

StackNavigator配置了3条路线：

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

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

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

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

Answer 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>
      );
   }
}

使用react-navigation和Redux

1 个答案: