React-Native with Expo: Handle Hardware Back Button



通过遵循这些指示,我设法使后退按钮强制我的WebView导航回最后一页。

然而,我面临一个副作用:除了回到导航,它也退出了应用程序,在Android。下面是我当前的代码。有人知道它有什么问题吗?

function useBackButton(handler: any) {
useEffect(()=> {
BackHandler.addEventListener("hardwareBackPress", handler)
return () => {
BackHandler.removeEventListener("hardwareBackPress", handler)
}
}, [handler])
}

export default function App() {

const webviewRef = useRef(null)

function backButtonHandler() : any {
console.log("==> Back Pressed", webviewRef.current)
if (webviewRef) {
if (webviewRef.current) {
webviewRef.current.goBack()
}
}
}
useBackButton(backButtonHandler)
return (
<WebView 
source={{uri: "http://my-website"}} 
style={{ marginTop: 40 }} 
ref={webviewRef}
sharedCookiesEnabled
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

正如@Nadia Chibrikova所指出的,确实存在一个" return true ";失踪:

function backButtonHandler() : any {
console.log("==> Back Pressed", webviewRef.current)
if (webviewRef) {
if (webviewRef.current) {
webviewRef.current.goBack()
}
}
return true
}

最新更新