返回博客首页
← 所有文章

创建原生 Android 包并在 NativeScript 中使用它们

2015 年 7 月 31 日 - 作者：Kiril Stanoev
在这篇文章中，我将带您逐步完成创建一个 jar 库的过程，该库随后将在自定义 NativeScript 插件中被引用。

为什么？

几天前，NativeScript 1.2 版本发布了。在这个版本中，对 NativeScript 插件的支持得到了增强，以支持原生库。您现在可以将原生 iOS 和 Android 库打包成一个 npm 包，并将其作为插件进行分发。在一般情况下，您将能够找到应用程序已经实现的原生包，但如果找不到应用程序的现有 UI，您可能需要创建自定义原生组件。因为 NativeScript 就是要为您带来原生的用户体验，对吧？在这篇文章中，我们将指导您如何创建一个简单的 JAR 包，并将其嵌入到 NativeScript 插件中。

如何？

我将使用 Android Studio 创建一个项目，并将其导出到 jar 文件，以及 NativeScript 的 1.2 版本。该 jar 文件将实现基本的显示 Toast 通知功能，以便在 NativeScript 应用程序的主视图加载时显示。这是最终的结果。

screen #0

使用 Android Studio 创建 jar 库

首先创建一个新的 Android Studio 项目。
 
screen #1

screen #2

screen #3

项目加载完成后，切换到 Project 视图并展开 app 模块。
 
screen #4

screen #5

在 org.nativescript.kstanoev.toaster 中添加一个新的 Java 文件，并添加显示 Toast 通知代码。

screen #6

screen #7

package org.nativescript.kstanoev.toaster;
 
import android.content.Context;
import android.widget.Toast;
 
public class Toaster {
   public void show(Context context) {
       CharSequence text = "Hello NativeScript!";
       int duration = Toast.LENGTH_SHORT;
 
       Toast toast = Toast.makeText(context, text, duration);
       toast.show();
   }
}

下一步是将项目导出为 jar 文件。打开 build.gradle（位于 app 模块中）并应用以下更改。
 
screen #8

1. 将第一行

apply plugin: 'com.android.application'

更改为

apply plugin: 'com.android.library'

2. 从 defaultConfig 中删除 applicationId、versionCode 和 versionName。

3. 在文档底部添加以下任务。

// 删除旧 jar 文件的任务
task deleteOldJar(type: Delete) {
   delete 'release/ToastPlugin.jar'
}
 
// 将内容导出为 jar 文件的任务
task exportJar(type: Copy) {
   from('build/intermediates/bundles/release/')
   into('release')
   include('classes.jar')
   // 命名插件
   rename('classes.jar','ToastPlugin.jar')
}
 
exportJar.dependsOn(deleteOldJar, build)

注意：ToastPlugin.jar 是您的 jar 文件的名称。您可以随意命名。

apply plugin: 'com.android.library'
 
android {
    compileSdkVersion 22
    buildToolsVersion "23.0.0 rc2"
 
    defaultConfig {
        minSdkVersion 19
        targetSdkVersion 22
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
 
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
}
 
// 删除旧 jar 文件的任务
task deleteOldJar(type: Delete) {
    delete 'release/ToastPlugin.jar'
}
 
// 将内容导出为 jar 文件的任务
task exportJar(type: Copy) {
    from('build/intermediates/bundles/release/')
    into('release')
    include('classes.jar')
    // 命名插件
    rename('classes.jar','ToastPlugin.jar')
}
 
exportJar.dependsOn(deleteOldJar, build)

完成后，只需与 gradle 同步即可。

screen #9

最后一步是将 Android Studio 项目导出为 jar 文件。我们将使用 gradle 来完成此操作。在 Android Studio 的右侧，您应该有一个名为“Gradle”的选项卡。
 
此选项卡包含各种 gradle 任务。我们要找的任务名为 exportJar。

screen #11

双击该任务将运行它。让它完成它的工作。在此期间，您可以放松一下，喝点饮料。如果 exportJar 顺利完成，您应该在项目的 release 文件夹中找到一个名为 ToastPlugin.jar 的文件。

screen #12

现在，我们将暂时搁置 jar 文件，并专注于创建 NativeScript 插件。

创建 NativeScript 插件

根据文档，我们的 NativeScript 插件必须遵循以下结构。
 
screen #12_0

为了简单起见，我们假设我们的工作文件夹是 C:\Work\。

在 C:\Work\ 中创建一个名为 toastplugin 的新文件夹。在 toastplugin 文件夹中创建一个 package.json 文件，内容如下所示。

{
  "name": "nativescript-toaster",
  "version": "0.0.1",
  "main": "index.js",
  "nativescript": {
    "platforms": {
      "android": "1.​2.0"
    }
  }
}

保存并关闭该文件。

在 toastplugin 文件夹中，创建一个名为 platforms 的新文件夹。打开 platforms 文件夹，并创建一个名为 android 的新文件夹。打开 android 文件夹，并创建一个名为 AndroidManifest.xml 的文件，内容如下所示。
 
<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

请注意，显示 Toast 通知不需要特殊权限。我添加了互联网权限是为了演示目的。

保存并关闭 AndroidManifest.xml 文件。

仍在 android 文件夹中，创建一个名为 libs 的新文件夹。打开 libs 文件夹，并复制粘贴您的 ToastPlugin.jar 文件。

文件夹结构已设置好，因此请返回到 toastplugin 文件夹，其中包含 package.json 文件。在 toastplugin 文件夹中创建一个名为 index.js 的新文件。

index.js 将包含公开 ToastPlugin.jar 功能的代码。
 
screen #13

打开 index.js 并粘贴以下内容。
 
var application = require("application");
var context = application.android.context;
 
module.exports = {
    showToast: function() {
        var toaster = new org.nativescript.kstanoev.toaster.Toaster();
        toaster.show(context);
    }
};

我们完成了插件！

安装插件

让我们安装我们刚刚创建的插件。NativeScript 允许您从本地文件夹以及通过 npm 安装插件。
 
screen #14

使用插件

安装插件只是在 NativeScript 应用程序中使用 jar 功能的第一步。现在打开 main-page.js（位于 C:\Work\toast-test\app\ 中）并粘贴以下内容。
 
var toaster = require("nativescript-toaster");
function pageLoaded(args) {
    var page = args.object;
     
    // 应用加载完成后显示 Toast 消息
    toaster.showToast();
}
exports.pageLoaded = pageLoaded;

此外，请从 main-page.xml 文件中删除所有不必要的內容。
 
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <StackLayout>
     
  </StackLayout>
</Page>

现在一切就緒。将您的 Android 手机连接到 USB，并使用命令 tns run android 运行 NativeScript 应用。
 
screen #14_0

screen #15

如果您想了解更多关于使用 npm 模块和 NativeScript 插件的信息，请查看 这篇文章，由 @tjvantoll 撰写。如果您遇到问题，可以参考 文档 和 NativeScript 谷歌小组，它们都是很好的资源。