React-Native 自封裝原生模組
React-Native 出現也有一段時間了，其實我們在一些應用中已經接觸過基於它的或效果類似於它的App,如手機淘寶。在每年雙十一時我們會發現沒有更新app也會有一些不同的介面。當然你可能認為WebView也可以做到這些。但實際上RN與WebView是不同的，RN的控制元件正如其名字中的Native描述，是原生的。還有據說微信的小程式也是基於RN做的。甚至有人說RN是移動開發的未來。就本人看來，RN確實在UI開發上提供了一種新的思路，新生的東西學一些沒有什麼壞處，萬一趕上時代了呢？
進入正題。在RN中文網上看了原生模組的的介紹，按著原文的指導敲了一遍，發現有些不太一樣特此在這記錄分享一下。
我發現我的排版跟shi一樣
首先在這裡說明一下，我是先在Android Studio(AS)中新建的空白工程，然後再一步步搭建RN的，如果客官是Clone的RN的demo工程然後修改的，建議還是觀看官方教程。
（假設電腦中已經裝好RN的環境了）
①、進入工程根目錄：npm init（可以直接在AS的Terminal中npm init)
②、npm install –save react react-native(執行完這條指令後注意了，會讓你輸入一系列資訊，跟著輸入就好，預設的直接enter鍵，這步生成package.json）。
③、在package.json的script欄位加入”start”: “node node_modules/react-native/local-cli/cli.js start”(注意該加逗號的地方加逗號）
④、根目錄手動建立index.android.js,然後新增一堆程式碼。
以上步驟我基本粗略說說，可以看官網教程嵌入到已有應用
接下來的問題出現概率就比較大了
⑤、在自己工程build.gradle(app)中新增依賴
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules.
}⑥、在工程Build.grade(Project)中新增（注意：如果你的node_modules資料夾在工程根目錄中，就是$rootDir/node_modules/react-native/android”的格式）。
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
...
}⑦、接下來就是新增許可權宣告，註冊除錯用的Activity,一定在Application標籤下注冊，然後新增一些原聲程式碼什麼的，可以直接看上面的嵌入的官網連結，還是直奔主題
開始封裝我們的ToastJS原聲模組。
這個模組也是模仿官方教程來的。
⑧、註冊模組之前官方說的都沒什麼問題，可以照著做都是一樣的。然後註冊模組這裡，我們建立了一個自己模組專屬的類。
package cn.scrovor.gogoo.Modules;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class ScrovorReactPackage implements ReactPackage {
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new ToastJS(reactContext));
return modules;
}
}然後官方說在MainApplication中進行返回該Package資訊，但我們自己寫的可能根本就沒有啊？！
其實自己寫的可以在這裡進行同樣操作。
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new ScrovorReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
然後就java部分的就完成了。
⑨、在JS部分封裝成模組，原官方沒有說清怎麼封裝，以及封裝模組如何放置。這裡說一下。
根目錄新建 Toast.js檔案，放入如下程式碼：
'use strict';
import {NativeModules} from 'react-native';
// ToastJS 對應自己寫的原生控制元件
export default NativeModules.ToastJS;然後再index.android.js中呼叫
import ToastJS from './ToastJS.js';
...
const onButtonPressed = () =>{
ToastJS.show("my native Component");
};當然你也可以自己新建一個資料夾放置自己的原聲模組，然後import時路徑寫對就可以了。
Demo的GitHub地址，有幫助的話記得Star奧。老鐵沒毛病吧。