Предотвратить масштабирование Angular NativeScript WebView с помощью пинч-масштабирования - PullRequest
Новая
       9

Предотвратить масштабирование Angular NativeScript WebView с помощью пинч-масштабирования

0 голосов
/ 31 января 2019

Итак, у меня есть приложение Nativescript, использующее Angular (NG 5.1.1 / Angular 7.x)

У меня есть представление с веб-просмотром. 

    @ViewChild("myWebView") webViewRef: ElementRef;

    <WebView class="webview" #myWebView [src]="myURL"></WebView>

Внутри моего webview.component.ts У меня есть это. 

ngAfterViewInit(): void {
    const webview: WebView = this.webViewRef.nativeElement;

    webview.on(WebView.loadFinishedEvent, (args: LoadEventData) => {
        this.setIndicatorFalse();
        if (webview.ios) {
            webview.ios.scrollView.delegate = UIScrollViewDelegateZ.new();
            webview.ios.scrollView.minimumZoomScale = 1;
            webview.ios.scrollView.maximumZoomScale = 1;
        }
    });
    webview.on(WebView.loadStartedEvent, (args: LoadEventData) => {
        if (webview.android) {
            webview.android.getSettings().setBuiltInZoomControls(false);
            webview.android.getSettings().setDisplayZoomControls(false);
        } else {
            // @ts-ignore
            webview.ios.multipleTouchEnabled = false;
            webview.ios.scalesPageToFit = false;
            webview.ios.scrollView.bounces = false;
            webview.ios.scrollView.showsHorizontalScrollIndicator = true;
            webview.ios.scrollView.showsVerticalScrollIndicator = true;
            webview.ios.opaque = false;
            webview.ios.scrollView.allowsInlineMediaPlayback = true;
            webview.ios.scrollView.mediaPlaybackRequiresUserAction = false;
        }
    });
}

Как вы можете видеть, я перепробовал все виды вещей, чтобы это веб-просмотр не уменьшал масштаб.

Я переопределяю свой ViewDelegate с помощью 

webview.ios.scrollView.delegate = UIScrollViewDelegateZ.new();

, и этот файл находится здесь 

export class UIScrollViewDelegateZ extends NSObject implements UIScrollViewDelegate {

public static ObjCProtocols = [UIScrollViewDelegate];

static new(): UIScrollViewDelegateZ {
    console.log("here we are");

    return <UIScrollViewDelegateZ>super.new();
}

viewForZoomingInScrollView(scrollView: UIScrollView): UIView {
    console.log("viewForZoomingInScrollView");

    return null;
}

scrollViewDidScroll(scrollView: UIScrollView): void {
    console.log("scrollViewDidZoom");

    return null;
}

scrollViewWillBeginZoomingWithView(scrollView: UIScrollView, view: UIView): void {
    console.log("scrollViewWillBeginZoomingWithView   " + scrollView);

    return null;
    }
}

Когда я загружаю свое веб-представление и увеличиваю изображение, мой журнал консоли говорит это: 

 CONSOLE LOG file:///app/app/webview/scrollDelegate.js:9:20: here we are
 CONSOLE LOG file:///app/app/webview/scrollDelegate.js:21:20: scrollViewWillBeginZoomingWithView   <WKScrollView: 0x7fb140afe000; baseClass = UIScrollView; frame = (0 0; 375 603); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x600000ab2100>; layer = <CALayer: 0x600000537480>; contentOffset: {0, 0}; contentSize: {375, 1916}; adjustedContentInset: {0, 0, 0, 0}>
 CONSOLE LOG file:///app/app/webview/scrollDelegate.js:17:20: scrollViewDidZoom

Так я чувствую, что я рядом ??но я просто не могу заставить его пойти?Я думал, что я должен был вернуть null / undefined при попытке увеличения масштаба?это то, что несколько других SO-ответов / сеть говорят сделать, но ничего не работает.

HTML-страница также имеет правильные заголовки метатэгов ... 

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"/>

Любая помощь будетоценили!Спасибо !!

1 Ответ

0 голосов
/ 31 января 2019

Вы должны переопределить метаданные по умолчанию, устанавливаемые tns-core-modules.

import { WebView } from 'tns-core-modules/ui/web-view';

declare var WKUserScript, WKUserScriptInjectionTime, WKUserContentController, WKWebViewConfiguration, WKWebView, CGRectZero;

(<any>WebView.prototype).createNativeView = function () {
    const jScript = `var meta = document.createElement('meta'); 
    meta.setAttribute('name', 'viewport');
    meta.setAttribute('content', 'initial-scale=1.0 maximum-scale=1.0');
    document.getElementsByTagName('head')[0].appendChild(meta);`;
    const wkUScript = WKUserScript.alloc().initWithSourceInjectionTimeForMainFrameOnly(jScript, WKUserScriptInjectionTime.AtDocumentEnd, true);
    const wkUController = WKUserContentController.new();
    wkUController.addUserScript(wkUScript);
    const configuration = WKWebViewConfiguration.new();
    configuration.userContentController = wkUController;
    configuration.preferences.setValueForKey(
        true,
        "allowFileAccessFromFileURLs"
    );
    return new WKWebView({
        frame: CGRectZero,
        configuration: configuration
    });
};

Вот Образец игровой площадки , так как вы используете Angular, вы можете добавить вышеупомянутые строки к вашему app.component.ts

...