如何使用 react-native-router-flux 在每个场景中处理 backAndroidHandler答案

【问题标题】：How do I handle backAndroidHandler in each scene using react-native-router-flux如何使用 react-native-router-flux 在每个场景中处理 backAndroidHandler
【发布时间】：2020-05-08 05:51:22
【问题描述】：

作为标题描述，我使用的是 react-native-router-flux。

还有一个问题，我之前用backAndroidHandler={true}在<Router/>工作正常。

但是现在，由于某种原因，我必须设置backAndroidHandler 来控制物理后退按钮在不同场景中的启用。

所以我不能像以前这样把它放在路由器中：

例子：

<Router
    backAndroidHandler={true}>
    <Scene key="a" />
    <Scene key="b" />
    <Scene key="c" />
</Router>

如果没有setState，我如何在不同的场景或标签中设置backAndroidHandler来实现这一点（因为它会在路由页面重新渲染）？

我尝试过有人在其他问题中使用 <Scene key="c" type={ActionConst.RESET}/> 之类的方法说没有用。

任何帮助或推荐将不胜感激。谢谢。

【问题讨论】：

标签： javascript android react-native react-native-router-flux

【解决方案1】：

研究了几次之后，我找到了另一种实现这种效果的方法。

使用BackHandler from react-native 添加一个监听器来监听物理后退按钮触发，然后与react-native-router-flux Actions.currentScene 比较来定义他们应该在不同的页面中执行的操作，如下所示：

import { Text, StyleSheet, Image, View, BackHandler, TouchableOpacity } from "react-native";
...

class ResultsView extends Component {
  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick); //here
  }
  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
  }
  handleBackButtonClick() {
    let cs = Actions.currentScene;
    if (cs === "APage" || cs === "BPage" || cs === "CPage" || cs === "DPage") {
      console.log("nono square don't pop!")
    } else {
      Actions.pop()
      console.log("touch to pop here")
    }
  }
...

然后将路由器中的backAndroidHandler设置为true：

<CustomRouter backAndroidHandler={true}>
...

而且效果很好。

【讨论】：