react react导航中的本机android后退按钮
react react导航中的本机android后退按钮
提问于 2018-06-08 12:54:38
我有一个带有多个屏幕的react-native应用程序，每个屏幕上都有一个上栏，其中有一个后退按钮，它的主要行为是，当按下这个按钮时，应用程序返回到主屏幕。我想要做的是将这种行为复制到“硬件后退”按钮(现在按下“硬件后退”按钮，应用程序就会关闭)，我该如何做呢？
更新：
我用的是react-navigation和redux
回答 5
Stack Overflow用户
回答已采纳
发布于 2018-06-08 13:11:06
您可以：
- 从“react本机”导入BackHandler
- 添加componentDidMount (componentWillMount废弃的)
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton); - 像这样实现handleBackButton
handleBackButton(){ this.props.navigation.popToTop(); return true; }
popToTop返回到堆栈中的第一个屏幕。
如果您使用react导航和Redux，您应该将popToTop实现为要调度的操作。
Stack Overflow用户
发布于 2018-06-08 13:13:22
你可以通过下面的例子来做
import { BackHandler } from 'react-native';
class App extends Component {
constructor(props){
super(props);
this.backButtonClick = this.backButtonClick.bind(this);
}
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.backButtonClick);
}
componentWillUnmount(){
BackHandler.removeEventListener('hardwareBackPress', this.backButtonClick);
}
backButtonClick(){
if(this.props.navigation && this.props.navigation.goBack){
this.props.navigation.goBack(null);
return true;
}
return false;
}
}Stack Overflow用户
发布于 2020-12-03 10:09:04
在功能组件中使用react Hooks实现：
useEffect(() => {
function handleBackButton() {
navigation.navigate('register-phone');
return true;
}
const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackButton);
return () => backHandler.remove();
}, [navigation]);不要忘记删除卸载.上的侦听器
基于react本机文档。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50761125
复制相关文章
相似问题
腾讯云开发者
