Как я могу сделать высокую динамику в iOS с WebView, Nativescript?

Question

У меня проблема в том, что WebView не загружает высоту динамически в iOS (в Android, если он это делает), вопрос в том, что мой контент динамический и может расти, и установка фиксированной высоты не будет работать для меня.Не могли бы вы помочь мне?

<CardView *ngFor="let itinerario of itinerario" class="card" elevation="40" radius="10" ios:shadowRadius="3">
   <StackLayout class="card-layout text-center">
      <WebView [src]="itinerario.mEstructura" height="auto"></WebView>
   </StackLayout>
</CardView>

Answer 1

Используйте собственный метод для оценки JavaScript, который может возвратить высоту документа.

HTML

<GridLayout>
    <ScrollView class="page">
        <StackLayout>
            <WebView src="https://www.nativescript.org/" [height]="height"
                (loadFinished)="onWebViewLoadFinished($event)"></WebView>
            <Button class="btn btn-primary" text="Hello!"></Button>
        </StackLayout>
    </ScrollView>
</GridLayout>

TS

 onWebViewLoadFinished(event: EventData) {
    const webView = <WebView>event.object,
        jsStr = `var body = document.body;
        var html = document.documentElement;
        Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight);`;

    if (webView.ios) {
        webView.ios.scrollView.scrollEnabled = false;
        webView.ios.evaluateJavaScriptCompletionHandler(jsStr,
            (
                result,
                error
            ) => {
                if (error) {
                    console.log("error...");
                } else if (result) {
                    this.height = layout.toDeviceIndependentPixels(result);
                    this.changeDetectorRef.detectChanges();
                }
            });
    } else if (webView.android) {
        // Works only on Android 19 and above
        webView.android.evaluateJavascript(
            jsStr,
            new android.webkit.ValueCallback({
                onReceiveValue: (height) => {
                    this.height = layout.toDeviceIndependentPixels(height);
                    this.changeDetectorRef.detectChanges();
                }
            })
        );
    }
}

Образец игровой площадки