如何使用 react-native-router-flux 在每個場景中處理 backAndroidHandler

Question

作為標題描述，我使用的是 react-native-router-flux。

還有一個問題，我之前在<Router/>中使用backAndroidHandler={true}工作正常。

但是現在，由於某種原因，我必須設置backAndroidHandler來控制物理后退按鈕在不同場景中的啟用。

所以我不能像這樣把它放在路由器中：

例子：

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

我如何在不同的場景或標簽中設置backAndroidHandler以在沒有setState的情況下實現這一點（因為它會在路由頁面再次重新渲染）？

我試過有人在其他問題中說使用<Scene key="c" type={ActionConst.RESET}/>不起作用。

任何幫助或推薦將不勝感激。 謝謝。

Answer 1

經過一段時間的研究，我找到了另一種實現這種效果的方法。

使用BackHandler中的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")
    }
  }
...

然后將router中的backAndroidHandler設置為true：

<CustomRouter backAndroidHandler={true}>
...

它工作正常。