开发环境的搭建：
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<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);
}
}
网友评论