![](/img/trans.png)
[英]React Native + react-native-router-flux: What does <Scene key='modal' component={Modal}/> do?
[英]How do I handle backAndroidHandler in each scene using react-native-router-flux
作为标题描述,我使用的是 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}/>
不起作用。
任何帮助或推荐将不胜感激。 谢谢。
经过一段时间的研究,我找到了另一种实现这种效果的方法。
使用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}>
...
它工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.