[英]How do I handle backAndroidHandler in each scene using react-native-router-flux
As the title description, I'm using react-native-router-flux.作为标题描述,我使用的是 react-native-router-flux。
And there is a question, I used backAndroidHandler={true}
in <Router/>
work normally before.还有一个问题,我之前在
<Router/>
中使用backAndroidHandler={true}
工作正常。
But now, because some reason I have to set backAndroidHandler
to control physical back button enable in different scene.但是现在,由于某种原因,我必须设置
backAndroidHandler
来控制物理后退按钮在不同场景中的启用。
So I can't just put it in router something like this before:所以我不能像这样把它放在路由器中:
Example:例子:
<Router
backAndroidHandler={true}>
<Scene key="a" />
<Scene key="b" />
<Scene key="c" />
</Router>
How could I setting backAndroidHandler
in different scene or in the Tag to achieve this without setState
(Because it will rerender again at route page)?我如何在不同的场景或标签中设置
backAndroidHandler
以在没有setState
的情况下实现这一点(因为它会在路由页面再次重新渲染)?
I have tried someone said in other question using like <Scene key="c" type={ActionConst.RESET}/>
didn't work.我试过有人在其他问题中说使用
<Scene key="c" type={ActionConst.RESET}/>
不起作用。
Any help or recommend will be appreciate.任何帮助或推荐将不胜感激。 Thanks.
谢谢。
After researching some times, I found another way to achieve this effect.经过一段时间的研究,我找到了另一种实现这种效果的方法。
Use BackHandler
from react-native
to add a listener to listen physical back button trigger, and then compare with react-native-router-flux
Actions.currentScene
to defined what should they do in different page like this:使用
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")
}
}
...
And then set the backAndroidHandler
in router to true:然后将router中的
backAndroidHandler
设置为true:
<CustomRouter backAndroidHandler={true}>
...
And it works fine.它工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.