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

Question

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

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

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

所以我不能像以前那样把它放在路由器里:

示例：

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

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

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

如有任何帮助或建议，我们将不胜感激。谢谢。

Answer 1

经过一番研究，我找到了另一种实现这种效果的方法。

使用react-native中的BackHandler添加一个监听器来监听物理后退按钮触发，然后与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}>
...

而且效果很好。

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

How do I handle backAndroidHandler in each scene using react-native-router-flux

javascript

android

react-native

react-native-router-flux