如何在React Native和exit应用程序中使用后退按钮自定义Webview以浏览网站,并按两次后退?

当按下退出应用程序时,我在使用后退按钮作为后退按钮实现网站的Webview导航时面临问题。

我实现了一个按钮功能,它使用浏览器返回上一页和下一页的功能。但是,这并不是一个有效的实施。

以下是我的webview代码:

 import React, { useEffect, useState, useRef } from "react";
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  StatusBar,
  Alert,
  BackHandler,
} from "react-native";
import { State, TouchableOpacity } from "react-native-gesture-handler";
import * as firebase from "firebase";
import { loggingOut } from "../API/firebaseMethods";
import { WebView } from "react-native-webview";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import SignIn from "./SignIn";
import SignUp from "./SignUp";
import { useBackHandler } from "@react-native-community/hooks";
import NavigationView from "./NavigationView";

const Tab = createBottomTabNavigator();

const LENNY = "https://www.testbooking.lennyconsulting.com/";
const THEME_COLOR = "#000000";

export default function Dashboard({ navigation }) {
  function backActionHandler() {
    Alert.alert("", "Are Your Sure To Exit The App?", [
      {
        text: "No",
        onPress: () => null,
        style: "cancel",
      },
      {
        text: "Yes",
        onPress: () => BackHandler.exitApp(),
      },
    ]);
    return true;
  }
  useBackHandler(backActionHandler);

  let currentUserUID = firebase.auth().currentUser.uid;
  const [firstName, setFirstName] = useState("");

  useEffect(() => {
    async function getUserInfo() {
      try {
        let doc = await firebase
          .firestore()
          .collection("users")
          .doc(currentUserUID)
          .get();

        if (!doc.exists) {
          Alert.alert("No user data found!");
        } else {
          let dataObj = doc.data();
          setFirstName(dataObj.firstName);
        }
      } catch (err) {
        Alert.alert("There is an error.", err.message);
      }
    }
    getUserInfo();
  });

  const handlePress = () => {
    loggingOut();
    navigation.replace("Home");
  };

  const AppStatusBar = ({ backgroundColor, ...props }) => {
    return (
      <View style={[styles.statusBar, backgroundColor]}>
        <StatusBar backgroundColor={backgroundColor} {...props} />
      </View>
    );
  };

  const BAR_HEIGHT = StatusBar.currentHeight;

  const styles = StyleSheet.create({
    statusBar: {
      height: BAR_HEIGHT,
    },
  });
  const webViewRef = useRef();
  const [canGoBack, setCanGoBack] = useState(false);
  const [canGoForward, setCanGoForward] = useState(false);
  const handleBackPress = () => {
    webViewRef.current.goBack();
  };
  const handleForwardPress = () => {
    webViewRef.current.goForward();
  };
  return (
    <SafeAreaView style={styles.container}>
      <SafeAreaView style={{ width: "100%", height: "100%" }}>
        <WebView
          ref={webViewRef}
          source={{ uri: LENNY }}
          onLoad={console.log("Loaded")}
          onNavigationStateChange={(state) => {
            const back = state.canGoBack;
            const forward = state.canGoForward;
            setCanGoBack(back);
            setCanGoForward(forward);
          }}
        />
        <NavigationView
          onBackPress={handleBackPress}
          onForwardPress={handleForwardPress}
          canGoBack={canGoBack}
          canGoForward={canGoForward}
        />
        <StatusBar style="auto" />
        <View>
          <Text style={styles.text}>Hi {firstName}</Text>
          <TouchableOpacity style={styles.button} onPress={handlePress}>
            <Text style={styles.buttonText}>Log Out</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
      <SafeAreaView style={styles.topSafeArea} />
      <SafeAreaView style={styles.bottomSafeArea}>
        <AppStatusBar backgroundColor={THEME_COLOR} barStyle="light-content" />
      </SafeAreaView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  topSafeArea: {
    flex: 1,
    backgroundColor: THEME_COLOR,
  },
  bottomSafeArea: {
    flex: 1,
    backgroundColor: THEME_COLOR,
  },
  button: {
    width: 150,
    padding: 5,
    backgroundColor: "#ff9999",
    borderWidth: 2,
    borderColor: "white",
    borderRadius: 15,
    alignSelf: "center",
  },
  buttonText: {
    fontSize: 20,
    color: "white",
    fontWeight: "bold",
    textAlign: "center",
  },
  container: {
    height: "100%",
    width: "100%",
    backgroundColor: "#3FC5AB",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    textAlign: "center",
    fontSize: 20,
    fontStyle: "italic",
    marginTop: "2%",
    marginBottom: "10%",
    fontWeight: "bold",
    color: "black",
  },
  titleText: {
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold",
    color: "#2E6194",
  },
});

请有人帮帮我。我是个新来的土生土长的人。