react-native - React Native WebView App 在按下后退按钮时不退出
问题描述
在按下后退按钮设置返回功能后,React Native WebView App 在按下后退按钮时不会退出。当webview不在主页上并且当webview在主页上时,我想返回按返回按钮的功能然后退出应用程序。
export default class WebView extends Component {
constructor (props) {
super(props);
this.WEBVIEW_REF = React.createRef();
}
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}
handleBackButton = ()=>{
this.WEBVIEW_REF.current.goBack();
return true;
}
onNavigationStateChange(navState) {
this.setState({
canGoBack: navState.canGoBack
});
}
render(){
return (
<WebView
source={{ uri: 'https://stackoverflow.com' }}
ref={this.WEBVIEW_REF}
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
/>
);
}
}
解决方案
由于您正在管理canGoBack
内部函数的状态,因此如下onNavigationStateChange
更改您的函数,handleBackButton
handleBackButton = () => {
if (this.state.canGoBack) {
this.WEBVIEW_REF.current.goBack();
return true;
}
}
检查下面的完整示例
import React, { Component } from "react";
import { BackHandler } from "react-native";
import { WebView } from "react-native-webview";
export default class App extends Component {
WEBVIEW_REF = React.createRef();
state = {
canGoBack: false,
};
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.handleBackButton);
}
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.handleBackButton);
}
handleBackButton = () => {
if (this.state.canGoBack) {
this.WEBVIEW_REF.current.goBack();
return true;
}
};
onNavigationStateChange = (navState) => {
this.setState({
canGoBack: navState.canGoBack,
});
};
render() {
return (
<WebView
source={{ uri: "https://stackoverflow.com" }}
ref={this.WEBVIEW_REF}
onNavigationStateChange={this.onNavigationStateChange}
/>
);
}
}
希望这对您有所帮助。随意怀疑。
推荐阅读
- java - 获取双卡电话通话记录(通话记录来自什么 SIM 卡)
- video - ffmpeg - 在我应用多遍工作流程时保持视频质量,每个工作流程都包括再次解码和编码,在视频编辑中
- c# - 用数组中的字符串填充数据集记录
- javascript - localStorage 属性不存储元素的超文本引用属性
- flutter - 一些可以帮助我在颤振中实现日历小部件
- swift - Swift:音频播放完毕后如何设置代码执行?
- ios - MultipeerConnectivity 在 iOS 14 上无法按预期工作
- c# - CrystalDecisions.CrystalReports.Engine.dll 中的 System.Runtime.InteropServices.COMException
- java - 如何在每个类 WebClient retryWhen 中避免硬编码
- c# - SQL查询将数据插入到asp.net中包含外键的表中