NativeScript InAppBrowser

提供对系统网络浏览器的访问，并支持处理重定向

Android的Chrome Custom Tabs和iOS的SafariServices/AuthenticationServices。

谁在使用InAppBrowser？

你想看看这个包的实际应用吗？查看这些惊人的项目，耶！🎉

• Oxycar - 提供便捷的上下班出行方式。
• Pegus Digital - 您在数字产品开发中的创新伙伴。

在这里分享您的出色项目 这里！💖

入门

tns plugin add @akylas/nativescript-inappbrowser

手动安装

• Android平台，带Android支持

  修改您的 android/build.gradle 配置

  buildscript {
    ext {
      buildToolsVersion = "28.0.3"
      minSdkVersion = 16
      compileSdkVersion = 28
      targetSdkVersion = 28
      // Only using Android Support libraries
      supportLibVersion = "28.0.0"
    }

• Android平台，带AndroidX

  修改您的 android/build.gradle 配置

  buildscript {
    ext {
      buildToolsVersion = "28.0.3"
      minSdkVersion = 16
      compileSdkVersion = 28
      targetSdkVersion = 28
      // Remove 'supportLibVersion' property and put specific versions for AndroidX libraries
      androidXBrowser = "1.0.0"
      // Put here other AndroidX dependencies
    }

用法

iOS选项

Android选项

演示

import { Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from '@akylas/nativescript-inappbrowser';

...
  openLink = async () => {
    try {
      const url = 'https://www.proyecto26.com'
      if (await InAppBrowser.isAvailable()) {
        const result = await InAppBrowser.open(url, {
          // iOS Properties
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: '#453AA4',
          preferredControlTintColor: 'white',
          readerMode: false,
          animated: true,
          modalPresentationStyle: 'fullScreen',
          modalTransitionStyle: 'coverVertical',
          modalEnabled: true,
          enableBarCollapsing: false,
          // Android Properties
          showTitle: true,
          toolbarColor: '#6200EE',
          secondaryToolbarColor: 'black',
          navigationBarColor: 'black',
          navigationBarDividerColor: 'white',
          enableUrlBarHiding: true,
          enableDefaultShare: true,
          forceCloseOnRedirection: false,
          // Specify full animation resource identifier(package:anim/name)
          // or only resource name(in case of animation bundled with app).
          animations: {
            startEnter: 'slide_in_right',
            startExit: 'slide_out_left',
            endEnter: 'slide_in_left',
            endExit: 'slide_out_right'
          },
          headers: {
            'my-custom-header': 'my custom header value'
          },
          hasBackButton: true,
          browserPackage: '',
          showInRecents: false
        });
        Dialogs.alert({
          title: 'Response',
          message: JSON.stringify(result),
          okButtonText: 'Ok'
        });
      }
      else {
        Utils.openUrl(url);
      }
    }
    catch(error) {
      Dialogs.alert({
        title: 'Error',
        message: error.message,
        okButtonText: 'Ok'
      });
    }
  }
...

使用深度链接进行身份验证流程

为了从网络浏览器重定向回您的应用程序，您必须指定一个唯一的URI到您的应用。为此，定义您的应用方案，并用您的信息替换my-scheme和my-host。

• 启用深度链接（Android） - AndroidManifest.xml

<activity
  ...
  android:launchMode="singleTask">
  <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:scheme="my-scheme" android:host="my-host" android:pathPrefix="" />
  </intent-filter>
</activity>

• 启用深度链接（iOS） - Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>my-scheme</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>my-scheme</string>
    </array>
  </dict>
</array>

• utilities.ts

export const getDeepLink = (path = "") => {
  const scheme = 'my-scheme';
  const prefix = global.isAndroid ? `${scheme}://my-host/` : `${scheme}://`;
  return prefix + path;
}

• home-page.ts

import { Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from '@akylas/nativescript-inappbrowser';
import { getDeepLink } from './utilities';
...
  async onLogin() {
    const deepLink = getDeepLink('callback')
    const url = `https://my-auth-login-page.com?redirect_uri=${deepLink}`
    try {
      if (await InAppBrowser.isAvailable()) {
        InAppBrowser.openAuth(url, deepLink, {
          // iOS Properties
          ephemeralWebSession: false,
          // Android Properties
          showTitle: false,
          enableUrlBarHiding: true,
          enableDefaultShare: false
        }).then((response) => {
          if (
            response.type === 'success' &&
            response.url
          ) {
            Utils.openUrl(response.url)
          }
        })
      } else Utils.openUrl(url)
    } catch {
      Utils.openUrl(url)
    }
  }
...

状态栏

状态栏将保持您在应用中提供的最后一个状态。所以如果状态栏在您打开浏览器之前是dark-content，这将保持不变。

身份验证

使用可用的内嵌浏览器标签（如SFAuthenticationSession/ASWebAuthenticationSession和Android Custom Tabs）。由于RFC 8252第8.12节中记录的可用性和安全原因，明确不支持嵌入的用户代理（如UIWebView和WKWebView）。

致谢 👍

• React Native InAppBrowser: InAppBrowser for React Native

贡献 ✨

在对此存储库进行贡献之前，请先通过问题、电子邮件或其他任何方式与此存储库的所有者讨论您希望做出的更改。
贡献使开源社区成为一个如此出色的学习、灵感和创造的地方。您所做的任何贡献都将被非常感激 ❤️。
您可以在贡献指南中了解更多关于如何为此项目做出贡献的信息。

贡献者 ✨

请贡献力量！问题和拉取请求都受欢迎。

代码贡献者

此项目的存在归功于所有做出贡献的人。[贡献]

合作者

Juan Nicholls ✉	Nathanael Anderson ✉

个人

致谢 👍

• React Native InAppBrowser: InAppBrowser for React Native