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

高鹏翔

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

还有一个问题,我以前backAndroidHandler={true}<Router/>工作中正常使用

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

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

例子:

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

我如何backAndroidHandler在不同的场景或标签中设置以实现这一点setState(因为它会在路线页面再次重新渲染)?

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

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

高鹏翔

经过一段时间的研究,我找到了另一种实现这种效果的方法。

使用BackHandlerfromreact-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")
    }
  }
...

然后将backAndroidHandlerin 路由器设置为 true:

<CustomRouter backAndroidHandler={true}>
...

它工作正常。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用React Native Router Flux / Redux保护路由(场景)

在 React Native Router Flux 中跨主要场景导航

使用React Native Router Flux在所有场景中维护选项卡

如何设置react-native-router-flux?

如何使用 react-native-router-flux 设置作为选项卡子项的场景的标题

React Native Router Flux:从主场景导航到子场景

React Native Router Flux:使用相同场景但使用其他参数的转换和历史

react-native-router-flux将道具传递给场景

如何将react-native-router-flux与react-native-drawer结合使用

如何配置 react-native-router-flux android back history?

react-native:如何结合 react-native-router-flux 和 react-native-drawer?

使用React Native Router Flux的延迟加载屏幕

使用react-native-router-flux自定义navBar

如何在React Native Router Flux选项卡中显示图标?

如何将值传递给React-Native-Router-Flux中的其他组件?

如何在react-native-router-flux中组合选项卡和导航栏?

如何在react-native-router-flux中设置Scene组件的标题

如何在 react-native-router-flux 中呈现常见的页眉和页脚?

在 react-native-flux-router 中传递道具

如何通过 react-native-router -flux 在 react-native 中更新回(上一个)屏幕

使用React Native Router Flux将道具传递到TabIcon中

转到子场景选项卡-react-native-router-flux

未找到 React Native 模塊:無法使用 react-native-router-flux 解析“@react-navigation/core”

react-native-router-flux:在选项卡之间进行切换时,如何防止“选项卡场景”历史记录堆栈被重置?

如何在React + React-Router + Flux中处理查询参数

我如何将react-native-router-flux与Relay集成在一起

react-native-router-flux选项卡如何更改所选选项卡的图标?

如何将道具传递到Actions.replace react-native-router-flux

React Native + react-native-router-flux:如何将hideNavBar应用于仅一个<Scene />?