一个在 Android 上使用 Chrome Custom Tabs 和在 iOS 上使用 SFSafariViewController 的高级 WebView。

安装

要安装，请执行

NativeScript 7+

ns plugin add nativescript-advanced-webview

NativeScript < 7

tns plugin add [email protected]

这是一个视频，展示了 NativeScript 中的 Chrome CustomTabs。

Android

CustomTabs

iOS

SFSafariViewController

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

Android 对比

演示

Android	iOS

示例

类型脚本

在应用启动前初始化服务，例如 app.ts，main.ts

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

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

function whateverYouLike() {
  NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadStarted, () => {
    console.log('LOAD STARTED');
  });

  NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadFinished, () => {
    console.log('LOAD FINISHED');
  });

  NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.LoadError, () => {
    console.log('LOAD ERROR');
  });

  NSAdvancedWebViewEventEmitter.once(AdvancedWebviewEvents.Closed, () => {
    console.log('CLOSED');
  });

  const opts: AdvancedWebViewOptions = {
    url: 'https://nativescript.cn',
    showTitle: true,
    toolbarColor: '#336699',
    toolbarControlsColor: '#fff'
  };

  openAdvancedUrl(opts);
}

API

• openAdvancedUrl(options: AdvancedWebViewOptions)
• close() _ iOS 仅 _ :: 关闭 safari 视图控制器。

AdvancedWebViewOptions 属性

• url: string
• toolbarColor: string
• toolbarControlsColor: string - ** iOS 仅 **
• showTitle: boolean - ** Android 仅 **

事件

• LoadStart
• LoadFinished
• LoadError
• Close

演示应用

• fork 仓库
• cd 到 src 目录
• 执行 npm run demo.android 或 npm run demo.ios