مشکل در webview

1400/04/02

مشکل در webview :

با سلام و درود

استاد ارجمند

من یک اپ webview ساخته‌ام.

1- لینکهای با target="blank" را در مرورگر باز می‌کند و از اپلیکیشن خارج می‌شود.

2- با لمس دکمه back ، برنامه بسته می‌شود و به صفحه قبلی بر نمی‌گردد.

اگر این دو مشکل قابل رفع هستند لطفا راهنمایی بفرمایید.

با تشکر 🌹🙏

import { StatusBar } from 'expo-status-bar';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
  return (

      <WebView
        source={{ uri: "http://ali-akbari.ir" }}
        renderError={() => alert('خطا', 'مشکل در اتصال به اینترنت')}
        style={styles.container}
        
        originWhitelist={['']}
        onMessage={(e) => console.log('WebView onMessage: ', e)}
        onLoad={syntheticEvent => {
          const { nativeEvent } = syntheticEvent;
          this.url = nativeEvent.url;
          console.log('WebView load: ', nativeEvent);
        }}
        onError={syntheticEvent => {
          const { nativeEvent } = syntheticEvent;
          console.log('WebView error: ', syntheticEvent);
        }}
        onNavigationStateChange={(e) => console.log('WebView onNavigationStateChange: ', e)}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
        scalesPageToFit={true}
        useWebKit={true}
      />

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#248599',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

export default App;

akbari070

MerryCamper

1401/01/18
ساعت 08:55

منم همین مشکل رو دارم دقیقا اگه به جواب رسیدی ممنون میشم اطلاع بدین

MerryCamper

1401/01/18
ساعت 11:20

حل شد

توی حالت کلاسی حل شد این مشکل به شکل زیر

نیاز به canGoBack هست

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://dominshoma" }}
        ref={this.WEBVIEW_REF}
        onNavigationStateChange={this.onNavigationStateChange}
        startInLoadingState={true}
        useWebKit
      />
    );
  }
}