React Native 适配Android物理返回键,实现连续两次点击退出
一直使用iPhone作为测试机开发,提交给测试同事Android版本后发现很多适配问题,其中一个非常明显的是,弹出一个modal后,点击Android的返回键,modal不会消失,直接navigation goBack了
在Android端需要处理物理按键事件 , 另外可以实现连续两次点击退出APP的功能
componentDidMount(): void { //挂载完,添加返回按键的监听 BackHandler.addEventListener('hardwareBackPress', this.handleBackPress); } componentWillUnmount(): void { //页面销毁时取消监听,防止内存泄漏 BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress); } handleBackPress = () => { if (this.props.navigation.isFocused()) {
//判断modal是否正在显示
if(this.state.modalVisible){
this.setState({modalVisible:false});
return true;
}
if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) { //最近2秒内按过back键,表示用户想退出应用。 BackHandler.exitApp(); return true; } this.lastBackPressed = Date.now(); ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT); //提示再次按返回触发 return true; } };