我对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
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 createNativeModules(ReactApplicationContext reactContext) {
    return Arrays.asList(
    new BaiduMapModule(reactContext),
    new GeolocationModule(reactContext),
    new RoutePlanModule(reactContext)
    );
    }

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

    @Override
    public List> 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 getPackages() {
  return Arrays.asList(
      new MainReactPackage(),
      new BaiduMapPackage(getApplicationContext())
  );
}

};

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

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

你可能感兴趣的:(我对React Native android插件开发的简单认识)