React Native WebView App не закрывается при нажатии кнопки назад - PullRequest
Новая
       20

React Native WebView App не закрывается при нажатии кнопки назад

0 голосов
/ 08 апреля 2020

React Native WebView App не закрывается при нажатии кнопки «Назад» после установки Go Функция возврата при нажатии кнопки «Назад». Я хочу, чтобы функция go возвращалась при нажатии кнопки «Назад», когда веб-просмотр отсутствует на домашней странице, а когда веб-просмотр находится на домашней странице, выйдите из приложения. 

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)}

          />
        );
      }
    }

1 Ответ

1 голос
/ 08 апреля 2020

Поскольку вы управляете состоянием 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}
      />
    );
  }
}

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

...