如何在 nativescript 中使用 InAppBrowser

Posted 2023-02-19

【中文标题】如何在 nativescript 中使用 InAppBrowser

【英文标题】：How to use InAppBrowser in nativescript

【发布时间】：2020-12-27 07:09:10

【问题描述】：

我将Nativescript inAppBrowser plugin 添加到我的nativescript core(javascript) 项目中。我将文档中的代码复制到我的项目中，但它不起作用（我猜是因为它是用打字稿写的）所以我编辑了代码。

现在，我收到错误 InAppBrowser.isAvaialble is not a function

这是我的 JavaScript 代码

const openUrl = require("tns-core-modules/utils/utils").openUrl;
const alert = require("tns-core-modules/ui/dialogs").alert;
const InAppBrowser = require("nativescript-inappbrowser");

videoCall: function (args) 
    try 
      const url = "https://example.com";
      if (InAppBrowser.isAvailable()) 
        const result = InAppBrowser.open(url, 
          // ios Properties
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: '#453AA4',
          preferredControlTintColor: 'white',
          readerMode: false,
          animated: true,
          modalPresentationStyle: 'fullScreen',
          modalTransitionStyle: 'partialCurl',
          modalEnabled: true,
          enableBarCollapsing: false,
          // android Properties
          showTitle: true,
          toolbarColor: '#6200EE',
          secondaryToolbarColor: 'black',
          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': 'MVM'
          
        )
        alert(
          title: 'Response',
          message: JSON.stringify(result),
          okButtonText: 'Ok'
        )
      
      else 
        openUrl(url);
      
    
    catch(error) 
      alert(
        title: 'Error',
        message: error.message,
        okButtonText: 'Ok'
      )
  
,

您可以将其与文档中的进行比较，看看我是否做错了什么，在此先感谢

【参考方案1】：

您的函数必须是 async，并且您需要在所有对 InAppBrowser 的调用前加上 await。

import  openUrl  from 'tns-core-modules/utils/utils';
import  alert  from 'tns-core-modules/ui/dialogs';
import InAppBrowser from 'nativescript-inappbrowser';

async function openLink(url)  
    try 
        if (await InAppBrowser.isAvailable()) 
            await InAppBrowser.open(url, 
                // iOS Properties
                dismissButtonStyle: 'cancel',
                preferredBarTintColor: '#453AA4',
                preferredControlTintColor: 'white',
                readerMode: false,
                animated: true,
                modalPresentationStyle: 'fullScreen',
                modalTransitionStyle: 'partialCurl',
                modalEnabled: true,
                enableBarCollapsing: false,
                // Android Properties
                showTitle: true,
                toolbarColor: '#6200EE',
                secondaryToolbarColor: 'black',
                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: 
                
            );
        
        else 
          openUrl(url);
        
      
      catch(error) 
        alert(
          title: 'Error',
          message: error.message,
          okButtonText: 'Ok'
        )