使用 CocoaPods 在 NativeScript 1.3.0 中就像切蛋糕一样简单

NativeScript 1.3.0 已经发布，它包含了许多改进。其中一项改进就是简化了 CocoaPods 的使用。对于那些不了解 CocoaPods 的人来说，它是一个用于 Swift 和 Objective-C 项目的依赖管理器。它允许你轻松地获取一个开源的 GitHub 仓库，并添加对其生成的库的引用。

使用 NativeScript 1.3.0，你可以轻松地获取一个 pod 并将其用于 NativeScript 项目的 iOS 部分，只需使用 NativeScript CLI 即可完成，无需接触 Xcode。更重要的是，一个 pod 可以轻松地转换为一个 NativeScript npm 插件。

由于有大量的支持 CocoaPods 的仓库，你可以在你的 NativeScript 项目中获得几乎无限的可能性。

在这篇博客文章中，我将演示如何创建一个支持 CocoaPods 的插件，该插件稍后可以发布为 npm 插件，以及如何在你的 NativeScript 应用程序中使用该插件。

> 注意：NativeScript 需要最新版本的 CocoaPods - 0.38.2。你可以通过执行命令 pod --version 来检查你的版本。

我们今天博客的场景是关于加载/活动指示器。说实话，虽然我是一个真正的 iOS 粉丝，但我并不真正喜欢 iOS 加载指示器的设计。相反，Android 的 Material Design 加载指示器从我看到它的那一刻起就吸引了我的眼球。



由于我希望我的应用程序拥有最佳的外观和感觉，我想在 Android 和 iOS 上都拥有相同的出色指示器体验。有趣的是，已经为 iOS 开发了一个开源的 Material Design 指示器，而且该指示器的 GitHub 仓库 支持 CocoaPods。所以，这就是我们要实现的目标。

创建插件

首先，让我们创建我们的插件。使用 CocoaPods 创建插件就像 1-2-3 一样简单。

1. 创建一个文件夹来存放插件。让我们将文件夹命名为 nativescript-material-loading-indicator 。
2. 在该文件夹内创建一个 package.json 文件，并使用以下最小必需内容填充它
   
   {

    "name": "nativescript-material-loading-indicator",

    "version": "1.0.0",

    "description": "This package installs an activity indicator for iOS inspired by the material design indicator of Android",

    "main": "index.js",

    "nativescript": {

      "platforms": {

        "ios": "1.3.0"

      }

   }
3. 在 nativescript-material-loading-indicator 文件夹中，创建一个 platforms 文件夹。
4. 进入 platforms 文件夹并创建一个 ios 文件夹。
5. 进入 ios 文件夹并创建一个名为 Podfile 的文本文件。
6. 打开 Podfile 并使用以下内容填充它：
   pod "MMMaterialDesignSpinner"

正如你可能猜到的，CocoaPods 包管理器需要一个 Podfile 文件，该文件指定了应该使用哪个 pod。在 CocoaPods 基础设施中，名称“MMMaterialDesignSpinner”与 相应的 GitHub 仓库 相关联。

这就是我们在 NativeScript 插件中启用 CocoaPods 使用需要做的全部工作，仅此而已。现在，这个插件可以制作成 npm 插件，就像我 在这里 所做的一样。

该插件的“源代码”可以在 这个 GitHub 仓库 中找到。

创建项目并使用插件

1. 首先，让我们使用以下命令创建我们的项目
   
   tns create sample-cocoapods
   cd sample-cocoapods
   tns platform add ios
   
   
2. 假设我们的 nativescript-material-loading-indicator 插件文件夹与 sample-cocoapods 项目文件夹位于同一级别，我们可以使用以下命令安装插件
   
   tns plugin add ../nativescript-sample
   
   或者，既然我们已经知道插件位于 npm 上，我们可以使用以下命令安装插件
   
   tns plugin add nativescript-material-loading-indicator 
   
   这将从 npm 获取插件并将其安装到 NativeScript 中。

现在我们已经创建了项目并安装了插件。但让我们看看如何使用它：

1. 我们将使用一个 Placeholder 小部件来显示 iOS 的 Material 指示器。此小部件应该只在我们在 iOS 上运行时显示，因此我们需要一些条件属性
   
   <Placeholder ios:visibility="visible" android:visibility="collapse" creatingView="creatingView"/>
2. 另一方面，在 Android 上我们需要默认的 ActivityIndicator 小部件，但它应该在 iOS 上保持隐藏状态。因此，我们需要以下实现
   
   <ActivityIndicator ios:visibility="collapse" android:visibility="visible" ios:busy="false" android:busy="true"/>
   
   以下是 main-page.xml 所需的完整 xml 代码
   
   <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">

       <StackLayout>

           <Label text="Tap the button" cssClass="title"/>

       <Button text="TAP" tap="{{ tapAction }}" />

       <ActivityIndicator ios:visibility="collapse" android:visibility="visible" ios:busy="false" android:busy="true"/>

       <Placeholder ios:visibility="visible" android:visibility="collapse" creatingView="creatingView"/>

       <Label text="{{ message }}" cssClass="message" textWrap="true"/>

   </StackLayout>

   </Page>
   
   当然，你可以在完全不同的 xml 文件中为不同的平台分离 UI。不过，由于我们的更改很小，我将在同一个文件中进行条件化。
   
   
3. 你注意到 Placeholder 小部件调用了一个 creatingView 方法。这就是我们实际告诉小部件被我们的 Material 指示器替换的地方。以下是实现方法
   
   function creatingView(args) {

       if (platform.device.os == "iOS") {

           var spinnerView = MMMaterialDesignSpinner.alloc().initWithFrame(CGRectMake(0,0,40,40));

           spinnerView.lineWidth = 3.5;

           spinnerView.tintColor = UIColor.colorWithRedGreenBlueAlpha(61/255, 90/255, 254/255, 1);

    

           spinnerView.startAnimating();

           args.view = spinnerView;

       }

   }

    

   exports.creatingView = creatingView;
   
   无论 Placeholder 是否可见，creatingView 方法都会被调用，因此我们进行了一个操作系统检查，然后实施了我们的 iOS 相关 JavaScript 代码。

运行项目

这是实现方法。现在让我们使用以下命令运行应用程序

tns run ios --emulator

你会注意到，在 NativeScript CLI 提供的终端输出中，在构建/运行命令执行时，NativeScript 会自动执行必要的 CocoaPod 命令，以便我们的 pod 库可以适当地加载。

以下是结果，使用 NativeScript 和 CocoaPods 实现的漂亮而流畅的 iOS Material Design 指示器




如果我们要添加 Android 平台（tns platform add android）并为它运行项目（tns run android --emulator），我们将获得以下外观和感觉



当然，您在自己模拟器/设备上的体验会更加流畅，所以现在就去尝试项目和插件吧！

编码愉快！