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奥。老铁没毛病吧。