在Android上使用Chrome自定义标签页和在iOS上使用SFSafariViewController的高级webview。

这里有一个视频展示了在NativeScript中使用Chrome自定义标签页。

Android

自定义标签页

iOS

SFSafariViewController

为什么使用这个？因为性能很重要

Android 比较

演示

Android	iOS

安装

要安装，请执行

tns plugin add nativescript-advanced-webview

示例

类型Script

在应用开始之前启动服务，例如 app.ts, main.ts

import { init } from 'nativescript-advanced-webview';
init();

import { openAdvancedUrl, AdvancedWebViewOptions } from 'nativescript-advanced-webview';

public whateverYouLike() {

    const opts: AdvancedWebViewOptions = {
        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
        toolbarColor: '#ff4081',
        toolbarControlsColor: '#333', // iOS only
        showTitle: false, // Android only
        isClosed: (res) => {
            console.log('closed it', res);
        }
    };

    openAdvancedUrl(opts);
}

JavaScript

在应用开始之前启动服务，例如 app.ts, main.ts

var AdvancedWebView = require('nativescript-advanced-webview');

AdvancedWebView.init();

exports.whateverYouLike = function(args){
    var opts = {
        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
        toolbarColor: '#ff4081',
        toolbarControlsColor: '#333', // iOS only
        showTitle: false, // Android only
        isClosed: function (res) {
            console.log('closed it', res);
        }
    };

   AdvancedWebView.openAdvancedUrl(opts);

API

• openAdvancedUrl(options: AdvancedWebViewOptions)

AdvancedWebViewOptions 属性

• url: string
• toolbarColor: string
• toolbarControlsColor: string - ** iOS 仅限 **
• showTitle: boolean - ** Android 仅限 **
• isClosed: Function - 浏览器关闭时的回调

演示应用

• 分支仓库
• 进入 src 目录
• 执行 npm run demo.android 或 npm run demo.ios