我对React Native android插件开发的简单认识

开发环境的搭建：

1用android studio新建一个工程

2在工程中新建以android为Module名的Library

3在android Library中的根目录下打开build.gradle文件在 dependencies节点下添加引入RN所需要的依赖包.compile "com.facebook.react:react-native:+"

image

4.4.添加RN相关支持库,用于开发RN代码：

在你的工程根目录，运行以下代码：

$ npm init

$ npm install --save react

$ npm install --save react-native

$curl-o.flowconfighttps://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

这种会比较慢，这里提供一个比较快捷的方法,用RN方式快速构建一个空的项目，将内部的package.json和node_modules文件拷贝到自己的项目根目录下.(参考下RN创建项目的目录结构)

接着在你android studio开发工具中clean下项目获取RN的支持库。

至此---------------------------------------------------------------------开发环境搭建好了，要是开发特定的功能再去导入第三方jar和开发so包比如开发百度地图。

image

React native插件都是通过三个重要的类给js暴露出调用接口的

1.ReactContextBaseJavaModule（类）

2.ViewGroupManager<>（类）

3.ReactPackage（接口）

这也是react native插件开发中最重要的三个类，主体代码都是通过这个三个类进行扩展

ReactContextBaseJavaModule类主要是操作一些事件和逻辑不涉及view的一些东西，主要覆盖getName()方法，该方法返回一个字符串，以Module提供给js使用，

Eg：如果getName()返回”BaiduGeolocationModule”那么就这样调用

const _module = NativeModules.BaiduGeolocationModule;

ViewGroupManager<>类主要操作一些view控件的时候使用，主要覆盖它里面的getName()和createViewInstance方法，createViewInstance方法返回一个view对象，就是js上的标签，

getName()同上。

Eg：requireNativeComponent调用

ViewGroupManager<>中通过在方法上添加 @ReactProp(name = "zoomControlsVisible")注解来给返回的view标签添加属性 name的属性值就是view标签的属性

image

ReactContextBaseJavaModule通过在方法上添加@ReactMethod注解给js暴露调用方法

image

无论是调用方法还是属性都会用到js给reat native传值：

参数类型说明

上面我们讲解到@ReactMethod注解的方法，Java和JavaScript中的数据类型还是有一些区别，下面我们看一下Java和JavaScript的参数类型的对应问题,总体对应方式如下:

Boolean -> Bool

Integer -> Number

Double -> Number

Float -> Number

String -> String

Callback -> function

ReadableMap -> Object

ReadableArray -> Array

开发完自己的moudle或者view后需要进行注册：

我们需要自定义一个实现ReactPackage的类，同时需要实现这里边的三个方法。最重要的是在createNativeModules和createViewManagers方法中添加刚刚那个模块。如果没有注册，那么当前模块在JavaScript中是无法被访问到的。具体参考代码如下:

package org.lovebing.reactnative.baidumap;

import android.content.Context;

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.Arrays;
import java.util.Collections;
import java.util.List;

/**

Created by lovebing on 4/17/16.
*/
public class BaiduMapPackage implements ReactPackage {
private Context mContext;
BaiduMapViewManager baiduMapViewManager;
public BaiduMapPackage(Context context) {
this.mContext = context;
baiduMapViewManager = new BaiduMapViewManager();
baiduMapViewManager.initSDK(context);
}

@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Arrays.<NativeModule>asList(
new BaiduMapModule(reactContext),
new GeolocationModule(reactContext),
new RoutePlanModule(reactContext)
);
}

@Override
public List<ViewManager> createViewManagers(
ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
baiduMapViewManager
);
}

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
}
然后在ReactApplication进行注册
package com.oa;

import android.app.Application;
import android.util.Log;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import org.lovebing.reactnative.baidumap.BaiduMapPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new BaiduMapPackage(getApplicationContext())
  );
}

};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}