React Native WebView应用程序在按下返回按钮时没有退出

Question

在设置了按下返回按钮时的“返回”功能后，React Native WebView应用程序未退出。我希望在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)}

          />
        );
      }
    }

- beginner

Answer 1

由于您正在onNavigationStateChange函数中管理canGoBack的状态，请按以下方式更改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}
      />
    );
  }
}

希望这可以帮助你。如有疑问，请随时提出。

- SDushan

---

感谢您提供的代码。this.WEBVIEW_REF.current 抛出了 null。请帮忙解决。谢谢。 - mlg

Answer 2

我遇到了这个问题有一段时间，但我已经成功解决了它。我遇到的问题是，在onNavigationStateChange之前触发了用作返回事件的goBack函数，但不知何故状态已经改变，尽管首先调用了goBack函数。

const HomeScreen = () => {
  const {web} = config;
  const ref = useRef();
  const [canGoBack, setCanGoBack] = useState(false);

  const setupState = event => {
    setCanGoBack(event?.canGoBack);
  };

  useEffect(() => {
    const goBack = () => {
      if (canGoBack === false) {
        Alert.alert(
          'Exit App',
          'Do you want to exit app?',
          [
            {text: 'No', onPress: () => console.log('No'), style: 'cancel'},
            {text: 'Yes', onPress: () => BackHandler?.exitApp()},
          ],
          {cancelable: false},
        );
      }
      ref?.current?.goBack();
      return true;
    };

    BackHandler?.addEventListener('hardwareBackPress', () => goBack());

    return () =>
      BackHandler?.removeEventListener('hardwareBackPress', () => goBack());
  }, [canGoBack]);

  return (
    <View style={styles.mainContainer}>
      {/* last version 11.21.1 */}
      <WebView
        ref={ref}
        source={{uri: web?.url}}
        style={{flex: 1}}
        cacheEnabled={web.cacheEnabled}
        automaticallyAdjustContentInsets={false}
        domStorageEnabled={true}
        startInLoadingState={true}
        allowsInlineMediaPlayback={true}
        allowsBackForwardNavigationGestures
        onNavigationStateChange={e => setupState(e)}
      />
    </View>
  );
};

export default HomeScreen;

- koskee