返回博客首页
← 所有文章

宣布 @nativescript/capacitor Beta

2021年2月17日 — 作者：NativeScript TSC

我们首先要告诉您，几年来 NativeScript 存在一些误解。

🚨 剧透警告 🚨

它不是一项专门用于在 iOS 和 Android 设备上提供原生视图的技术。这当然也是它的一项功能，但只是该技术设计目标的副作用。

☀️ 我现在看得清清楚楚了 ☀️

NativeScript === 从 JavaScript 直接访问平台 API。

这适用于各种形状和大小的许多有益的开发体验。

哦，带我去看文档吧！

https://capacitor.nativescript.org/

Capacitor 和 Ionic 的优势

毫无疑问，浏览器开发不仅是一种愉快的体验，而且拥有广泛的交付载体，使 Web 开发成为一项影响深远的爱。从丰富的插件生态系统，到开发资源的规模经济，再到浏览器直接支持越来越多的硬件 API。

Ionic 团队以提供出色的 UI 组件框架套件以及在 Capacitor 中支持生态系统而闻名，该生态系统使 Web 开发人员能够轻松访问平台功能。

我们 100% 支持 Capacitor，并致力于帮助加强 Capacitor 社区。

@nativescript/capacitor - 它到底是什么？

  1. 一个带有 notify 方法的 Capacitor 插件，为 Capacitor 生态系统提供 NativeScript 的所有功能。

  2. 它提供了一个方便的 native 对象，在需要时可以快速直接访问您的平台。

  3. 一个独立且隔离的代码段，您可以在其中编写自己的原生平台 API 代码，并可选地扩展您自己的原生帮助器，以实现您能想到的任何功能。

为什么要这么做？

让我们概述一些使用 Capacitor 社区提案 的示例和实际案例，从一些简单的案例开始，逐步走向更复杂的案例。

native.setScreenBrightness = (value: number) => {
  if (native.isAndroid) {
    const context = native.androidCapacitorActivity;
    if (android.os.Build.VERSION.SDK_INT < 23) {
      const attr = context.getWindow().getAttributes();
      attr.screenBrightness = value;
      context.getWindow().setAttributes(attr);
    } else {
      if (!android.provider.Settings.System.canWrite(context)) {
        const intent = new android.content.Intent(
          android.provider.Settings.ACTION_MANAGE_WRITE_SETTINGS
        );
        intent.setData(
          android.net.Uri.parse("package:" + context.getPackageName())
        );
        intent.addFlags(android.content.Intent.FLAG_ACTIVITY_NEW_TASK);
        context.startActivity(intent);
      }

      if (android.provider.Settings.System.canWrite(context)) {
        android.provider.Settings.System.putInt(
          context.getContentResolver(),
          android.provider.Settings.System.SCREEN_BRIGHTNESS,
          value * 100
        );
      }
    }
  } else {
    UIScreen.mainScreen.brightness = value;
  }
};

在您的 Ionic Web 代码库中使用

import { native } from '@nativescript/capacitor';

native.setScreenBrightness(.8);

import {
  androidBroadcastReceiverRegister,
  androidBroadcastReceiverUnRegister,
} from "@nativescript/capacitor/bridge";

let isListening = false;
let clientCallback: (isEnabled: boolean) => void;
let observer;

native.togglePowerModeListener = (callback?: (isEnabled: boolean) => void) => {
  clientCallback = callback;
  if (native.isAndroid) {
    const action = "android.os.action.POWER_SAVE_MODE_CHANGED";
    if (!isListening) {
      isListening = true;
      androidBroadcastReceiverRegister(action, (context, intent) => {
        const manager: android.os.PowerManager = native.androidCapacitorActivity.getSystemService(
          android.content.Context.POWER_SERVICE
        );
        if (manager && clientCallback) {
          clientCallback(manager.isPowerSaveMode());
        }
      });
    } else {
      isListening = false;
      androidBroadcastReceiverUnRegister(action);
    }
  } else {
    if (!isListening) {
      isListening = true;
      observer = NSNotificationCenter.defaultCenter.addObserverForNameObjectQueueUsingBlock(
        NSProcessInfoPowerStateDidChangeNotification,
        null,
        null,
        (n: NSNotification) => {
          if (clientCallback) {
            clientCallback(NSProcessInfo.processInfo.lowPowerModeEnabled);
          }
        }
      );
    } else {
      isListening = false;
      NSNotificationCenter.defaultCenter.removeObserver(observer);
    }
  }
};

在您的 Ionic Web 代码库中使用

import { native } from '@nativescript/capacitor';

native.togglePowerModeListener((isEnabled: boolean) => {
  console.log("Power Mode changed:", isEnabled);
});
  • 原生 UI 混合

此示例演示了如何执行原生 UI 混合，例如根据需要使用纯原生模态实现。

native.openNativeModalView = () => {
  if (native.isAndroid) {
    androidCreateDialog(() => {
      const activity = native.androidCapacitorActivity;

      const layout = new android.widget.LinearLayout(activity);
      layout.setGravity(android.view.Gravity.CENTER);
      layout.setOrientation(android.widget.LinearLayout.VERTICAL);

      const btn = new android.widget.Button(activity);
      btn.setText('Ionic');
      layout.addView(btn);

      const btn1 = new android.widget.Button(activity);
      btn1.setText('Capacitor');
      layout.addView(btn1);

      return layout;
    });
  } else {
    const vc = UIViewController.alloc().init();
    vc.view.backgroundColor = UIColor.blueColor;
    const label = UILabel.alloc().initWithFrame(
      CGRectMake(0, 30, UIScreen.mainScreen.bounds.size.width, 50),
    );
    label.text = `Well this is fun.`;
    label.textColor = UIColor.orangeColor;
    label.textAlignment = NSTextAlignment.Center;
    label.font = UIFont.systemFontOfSize(35);
    vc.view.addSubview(label);
    iosRootViewController().presentModalViewControllerAnimated(vc, true);
  }
};

在您的 Ionic Web 代码库中使用

import { native } from '@nativescript/capacitor';

native.openNativeModalView();

曾经管理过多个第三方依赖项吗？

管理依赖项是软件可扩展性和维护的乐趣和痛苦之一。

  • 如果您的项目使用的插件过时，并且作者不再维护该插件会怎样？
  • 如果您的产品准备工作只剩下最后 5%，并且插件功能的一个方面无法正常工作会怎样？

如果它是开源的，您可以派生该插件，进行修改（贡献拉取请求！）并重新集成到您的项目中。这需要时间，因为通常存在多个集成点（例如，您通常必须单独构建它，如果出现问题，这可能会导致其他延迟），然后也需要重新集成到您的项目中。

NativeScript 一直旨在有效地解决这些情况，为您提供另一种缓解产品开发障碍和问题的选择。

最后但并非最不重要的是，在不离开主要 IDE 的情况下，触手可及的平台带来极大的乐趣。

平台语言更改、强类型检查和错误预防呢？

NativeScript 设计了一个元数据生成器。这是其设计的核心部分，这意味着平台所说的任何公共 API 都是可调用的，并且可用于开发的，都映射到 TypeScript 结构中。这意味着您在 Xcode 或 Android Studio 中获得的相同强类型检查，现在可以在您的 TypeScript 代码库中使用。

每当您为平台目标构建项目时，都会运行此元数据生成器。因此，如果平台更新发生（新的 Xcode、新的 iOS、新的 Android 版本等），您将看到相同的构建错误。这一次，您无需打开访问这些功能的插件以解决并重新集成，而可以直接处理，无需进一步延迟。

从字面上讲，NativeScript 是平台目标到 TypeScript 代码库的映射。

免费赠品！

对于前 10 位使用此插件为任何 此处列出的 Capacitor 社区提案 创建有帮助的解决方案的开发者，我们将赠送您

  • 2 个漂亮的开瓶器

  • 2 双漂亮的袜子

还有...

  • 2 个减压球！
Free Swag!