NativeScript Advanced Webview
An advanced webview using Chrome Custom Tabs on Android and SFSafariViewController on iOS.
Installation
To install execute:
NativeScript 7+:
ns plugin add nativescript-advanced-webview
NativeScript < 7:
tns plugin add nativescript-advanced-webview@5.0.0
Here is a video showing off Chrome CustomTabs in NativeScript.
Android
iOS
Why use this? Because Perf Matters
Demo
| Android | iOS |
|---|---|
Example
TypeScript
Initiate the service before the app starts e.g 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);
},
ios: {
viewController: // some viewcontroller to present from on iOS
}
};
openAdvancedUrl(opts);
}
Javascript
Initiate the service before the app starts e.g 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);
},
ios: {
viewController: // some viewcontroller to present from on iOS
}
};
AdvancedWebView.openAdvancedUrl(opts);
API
- openAdvancedUrl(options: AdvancedWebViewOptions)
AdvancedWebViewOptions Properties
- url: string
- toolbarColor: string
- toolbarControlsColor: string - ** iOS only **
- showTitle: boolean - ** Android only **
- isClosed: Function - callback when the browser closes
Demo App
- fork the repo
- cd into the
srcdirectory - execute
npm run demo.androidornpm run demo.ios
-
常见操作 java 调用 js js 调用 java webview 加载的html的 js样式 主要是 function 属性 /** <script> function callAndroid(){ // 由于对象映射，所以调用test对象等于调用Android映射的对象 test.hello("js调用了android中的hello方法");
-
Try With IOS 13 function mobileDetect() { var agent = window.navigator.userAgent; var d = document; var e = d.documentElement; var g = d.getElementsByTagName('body')[0]; var deviceWidth = window.inner
-
1.添加联网权限 <uses-permission android:name="android.permission.INTERNET" /> Activity注册 方式一 //实例化WebView对象 webview = new WebView(this); //设置WebView属性，能够执行Javascript脚本 webview.getSettings().setJavaScr
-
在软件内部打开一个网页--不喜欢它没有办法返回，还需要再添加返回按钮== import React from 'react'; import { AppRegistry, Component, ScrollView, TouchableOpacity, Text, View, WebView } from 'react-native'; e
-
We can access web pages in our React Native application using the WebView component. We will connect the links in our repository component to their Github web page when a user click on them. Navigat
-
Advanced features aims to help developer implement interactive applications more effectively. function chain switchCountry
-
描述 (Description) data-top-anchor = "idOfSomething", data-btm-anchor = "idOfSomething:[top/bottom]" ，或者设置像素数data-top-anchor = "150"用于将图像或粘性内容设置为一个特定的高度。 例子 (Example) 以下示例演示了在Foundation中使用toggler插件 - <!
-
链接 系统启动 参数&配置 参考参数 安装Intel RealSense R200的驱动 切换状态估计器 外部模块 STM32 Bootloader
-
Topics: Focus handling system Slivers Gestures
-
互联网 Java 工程师进阶知识完全扫盲 本项目大部分内容来自中华石杉，版权归作者所有，内容涵盖高并发、分布式、高可用、微服务、海量数据处理等领域知识。我对这部分知识做了一个系统的整理，方便学习查阅。 本项目已开通 Discussions 功能。学习之前，先来看看 Discussions 讨论区的技术面试官是怎么说的吧。本项目欢迎各位开发者朋友到 Discussions 讨论区分享自己的一些想法和
-
Advanced Node.js For help, ask in #questions at slack.jscomplete.com