为了方便阅读 本文章分为 3部分

1. 制作一个React-Native原生UI组件(Android and iOS)
2. 打包一个原生组件
3. 将原生组件上传至[npm]

第二部分主要讲将制作完的插件进行打包，前提是我们已经懂的插件的制作原理，如果不懂可以翻看之前第一篇文章制作思路。

Android

首先确保你写的插件在你开发的时候能正常运行
** 第一步:创建以下目录结构 **

Paste_Image.png
注意修改每个类的package
Paste_Image.png

其中com.mubin.counting是包

第二步:AndroidMainifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mubin.counting" >
</manifest>

**第三步:将你该插件的gradle 和该插件所属依赖库添加进去 **

buildscript {
    repositories {
        jcenter()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.3'
    }
}

apply plugin: 'com.android.library'

android {

    defaultConfig {
        versionCode 1
        versionName "1.0"
    }
    lintOptions {
        abortOnError false
    }
}

repositories {
    mavenCentral()
}

repositories {
    maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
}

dependencies {
    compile 'com.facebook.react:react-native:+'

}

如果你的插件有用到其他框架，你需要把依赖框架添加到gradle里

dependencies {
    compile 'com.facebook.react:react-native:+'
    compile 'XXXXX-XXXX-XXX' //依赖库
}

~就这么简单

---

iOS

**~ 对比起Android iOS 插件更简单 **
1.创建一个静态库

Paste_Image.png
2.将你的插件的类拉进去 Paste_Image.png

3.bingo完成

---

现在Android 和 iOS 插件都完成了

**下一步我们需要创建这样的一个文件夹 **

Paste_Image.png

• index.js: 文件入口
• ios:iOS 插件的目录文件夹
• android:Android 插件的目录文件夹
• package.json 这个是插件配置文件 这个会在文章第三部分详细说明

这样就写好了我们简单的插件
第三部分主要是讲解如何上传至npm