Javascript 防止backhandler最小化应用程序

当按下设备上的“后退”按钮时，如何防止应用程序最小化/退出

当按下设备上的后退按钮时，我试图分配“浏览器后退”功能，下面是我的代码：

import 'react-native-get-random-values';
import React, { useState, useRef, Component, useEffect  } from 'react'
import {
  Alert,
  SafeAreaView,
  StyleSheet,
  StatusBar,
  View,
  Text,
  ScrollView,
  BackHandler,
  RefreshControl
} from 'react-native'
import WebView from 'react-native-webview'
import Icon from 'react-native-vector-icons/FontAwesome';
import { Button } from 'react-native-elements';



const App = () => {
  function backButtonHandler(){}
  function refreshHandler(){
    if (webviewRef.current) webviewRef.current.reload()
  }

  useEffect(() => {
    BackHandler.addEventListener("hardwareBackPress", backButtonHandler);
    return () => {
      BackHandler.removeEventListener("hardwareBackPress", backButtonHandler);
    };
  }, [backButtonHandler]);


  let jscode = `window.onscroll=function(){window.ReactNativeWebView.postMessage(document.documentElement.scrollTop||document.body.scrollTop)}`;
  const [canGoBack, setCanGoBack] = useState(false)
  const [currentUrl, setCurrentUrl] = useState('')
  const [refreshing, setRefreshing] = useState(false);
  const [scrollviewState, setEnableRefresh] = useState(false);
  const webviewRef = useRef(null)
  const scrollviewRef = useRef(false)

  backButtonHandler = () => {
    if (webviewRef.current) webviewRef.current.goBack()
  }

  return (
    <>
      <StatusBar barStyle='dark-content' />
      <SafeAreaView style={styles.flexContainer}>
      <ScrollView
           contentContainerStyle={styles.flexContainer}
           refreshControl={
             <RefreshControl refreshing={false} onRefresh={refreshHandler} ref={scrollviewRef} enabled={ (scrollviewState) ? true : false  } />
           }>
        <WebView
          source={{ uri: 'https://youtube.com' }}
          startInLoadingState={true}
          ref={webviewRef}
          onNavigationStateChange={navState => {
            setCanGoBack(navState.canGoBack)
            setCurrentUrl(navState.url)
          }}

          injectedJavaScript={jscode}
          onMessage={(event)=>{
                        let message  = event.nativeEvent.data;
                        let num = parseInt(message);
                        if(num==0){setEnableRefresh(true)}
                        else{setEnableRefresh(false)}
                    }}
        />
        </ScrollView>


        <View style={styles.tabBarContainer}>
        <Button onPress={backButtonHandler}
          icon={
            <Icon
              name="arrow-left"
              size={15}
              color="white"
            />
          }
          containerStyle={styles.buttonx}
          title="Back"
        />
        </View>
      </SafeAreaView>
    </>
  )
}






const styles = StyleSheet.create({
  flexContainer: {
    flex: 1
  },
  tabBarContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: 'orange'
  },
  buttonx: {
    backgroundColor:'blue',
    width:'100%'
  }
})

export default App

import'react native get random value'；
从“React”导入React，{useState，useRef，Component，useffect}
进口{
警觉的，
安全区域视图，
样式表，
状态栏，
看法
文本，
滚动视图，
后台处理程序，
刷新控制
}从“反应本机”
从“react native WebView”导入WebView
从“反应本机矢量图标/FontAwesome”导入图标；
从“react native elements”导入{Button}；
常量应用=（）=>{
函数backButtonHandler（）{}
函数refreshHandler（）{
if（webviewRef.current）webviewRef.current.reload（）
}
useffect（（）=>{
addEventListener（“hardwareBackPress”，backButtonHandler）；
return（）=>{
removeEventListener（“hardwareBackPress”，backButtonHandler）；
};
}，[backButtonHandler]）；
让jscode=`window.onscroll=function（）{window.ReactNativeWebView.postMessage（document.documentElement.scrollTop | | document.body.scrollTop）}`；
const[canGoBack，setCanGoBack]=useState（false）
const[currentUrl，setCurrentUrl]=useState（“”）
const[refreshing，setRefreshing]=useState（false）；
const[scrollviewState，setEnableRefresh]=useState（false）；
const webviewRef=useRef（空）
常量scrollviewRef=useRef（false）
backButtonHandler=（）=>{
if（webviewRef.current）webviewRef.current.goBack（）
}
返回(
{
setCanGoBack（navState.canGoBack）
setCurrentUrl（navState.url）
}}
injectedJavaScript={jscode}
onMessage={（事件）=>{
让消息=event.nativeEvent.data；
让num=parseInt（消息）；
如果（num==0）{setEnableRefresh（true）}
else{setEnableRefresh（false）}
}}
/>
)
}
const styles=StyleSheet.create({
flexContainer：{
弹性：1
},
tabBarContainer：{
flexDirection:'行'，
为内容辩护：“周围的空间”，
背景颜色：“橙色”
},
按钮X：{
背景颜色：'蓝色'，
宽度：'100%'
}
})
导出默认应用程序

---

我的问题是，当我按下设备上的后退按钮时，它会调用

backButtonHandler

函数，我的webview会返回，但同时应用程序也会最小化。。有什么方法可以防止这种情况发生吗？

将backButtonHandler方法更改为仅返回true，当backHandler方法返回true时，它实际上不执行任何操作按Back按钮：

backButtonHandler=（）=>{
返回true；
}

谢谢！我不知道，我只需要回归真实；尽管我仍然必须保留

if（webviewRef.current）webviewRef.current.goBack（）

，因此它确实触发了我的webview上的back函数