文末有相关问题解决,
如:null is not an object(evaluating 'xxx.xxx')
1、创建模块
// ReactNativeModule.java
public class ReactNativeModule extends ReactContextBaseJavaModule {
public ReactNativeModule(ReactApplicationContext context) {
super(context);
}
@Override
public String getName() {
//返回值与 ReactNative 中 NativeModules.nativeView 一致
return "nativeView";
}
@ReactMethod
public void 给js调用的方法(){
//1、必须使用@ReactMethod注解
//2、必须使用void
}
}
2、 注册模块
// ExampleReactPackage.java
public class ExampleReactPackage implements ReactPackage {
@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 ReactNativeModule(reactContext));
return modules;
}
}
3、添加注册模块
根据官方文档
ExampleReactPackage 需要在MainApplication.java文件的getPackages方法中提供。
我按文档添加后并没有成功,报:null is not an object(evaluating ‘xxx.xxx’)
解决方案:在添加ReactRootView组件的Activity中
4、关于传参
常见参数类型这里就不说了,主要说一下js传json类型,这边怎么接收
public class ReactNativeModule extends ReactContextBaseJavaModule {
...
@ReactMethod
public void 给js调用的方法(ReadableMap map){
//1、json类型用ReadableMap来接收
}
}
5、关于回调
因为提供给js调用的方法返回是void,所以ReactNative提供了回调函数:Callback
public class ReactNativeModule extends ReactContextBaseJavaModule {
...
@ReactMethod
public void 给js调用的方法(ReadableMap map, Callback callback){
callback.invoke(Object... args);
//1、invoke()这里普通类型都没有问题
//2、invoke()传Json、HashMap、List等类型,只能使用 WritableMap
//这边举例传HashMap
JSONObject json = new JSONObject(hashMap);
WritableMap wMap = BundleJSONConverter.jsonToReact(json);
callback.invoke(null, wMap);
//使用到BundleJSONConverter类,下面提供源码
}
}
BundleJSONConverter.java
/**
* Written by Andrzej Porebski Nov 14/2015
* Copyright (c) 2015, Andrzej Porebski
*
* Modified by YunJiang.Fang
* Copyright (c) 2015, YunJiang.Fang
*/
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.ReadableMapKeySetIterator;
import com.facebook.react.bridge.ReadableType;
import com.facebook.react.bridge.WritableArray;
import com.facebook.react.bridge.WritableMap;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.Iterator;
public abstract class BundleJSONConverter {
public static JSONObject reactToJSON(ReadableMap readableMap) throws JSONException {
JSONObject jsonObject = new JSONObject();
ReadableMapKeySetIterator iterator = readableMap.keySetIterator();
while(iterator.hasNextKey()){
String key = iterator.nextKey();
ReadableType valueType = readableMap.getType(key);
switch (valueType){
case Null:
jsonObject.put(key,JSONObject.NULL);
break;
case Boolean:
jsonObject.put(key, readableMap.getBoolean(key));
break;
case Number:
try {
jsonObject.put(key, readableMap.getInt(key));
} catch(Exception e) {
jsonObject.put(key, readableMap.getDouble(key));
}
break;
case String:
jsonObject.put(key, readableMap.getString(key));
break;
case Map:
jsonObject.put(key, reactToJSON(readableMap.getMap(key)));
break;
case Array:
jsonObject.put(key, reactToJSON(readableMap.getArray(key)));
break;
}
}
return jsonObject;
}
public static JSONArray reactToJSON(ReadableArray readableArray) throws JSONException {
JSONArray jsonArray = new JSONArray();
for(int i=0; i < readableArray.size(); i++) {
ReadableType valueType = readableArray.getType(i);
switch (valueType){
case Null:
jsonArray.put(JSONObject.NULL);
break;
case Boolean:
jsonArray.put(readableArray.getBoolean(i));
break;
case Number:
try {
jsonArray.put(readableArray.getInt(i));
} catch(Exception e) {
jsonArray.put(readableArray.getDouble(i));
}
break;
case String:
jsonArray.put(readableArray.getString(i));
break;
case Map:
jsonArray.put(reactToJSON(readableArray.getMap(i)));
break;
case Array:
jsonArray.put(reactToJSON(readableArray.getArray(i)));
break;
}
}
return jsonArray;
}
public static WritableMap jsonToReact(JSONObject jsonObject) throws JSONException {
WritableMap writableMap = Arguments.createMap();
Iterator iterator = jsonObject.keys();
while(iterator.hasNext()) {
String key = (String) iterator.next();
Object value = jsonObject.get(key);
if (value instanceof Float || value instanceof Double) {
writableMap.putDouble(key, jsonObject.getDouble(key));
} else if (value instanceof Number) {
writableMap.putInt(key, jsonObject.getInt(key));
} else if (value instanceof String) {
writableMap.putString(key, jsonObject.getString(key));
} else if (value instanceof JSONObject) {
writableMap.putMap(key,jsonToReact(jsonObject.getJSONObject(key)));
} else if (value instanceof JSONArray){
writableMap.putArray(key, jsonToReact(jsonObject.getJSONArray(key)));
} else if (value == JSONObject.NULL){
writableMap.putNull(key);
}
}
return writableMap;
}
public static WritableArray jsonToReact(JSONArray jsonArray) throws JSONException {
WritableArray writableArray = Arguments.createArray();
for(int i=0; i < jsonArray.length(); i++) {
Object value = jsonArray.get(i);
if (value instanceof Float || value instanceof Double) {
writableArray.pushDouble(jsonArray.getDouble(i));
} else if (value instanceof Number) {
writableArray.pushInt(jsonArray.getInt(i));
} else if (value instanceof String) {
writableArray.pushString(jsonArray.getString(i));
} else if (value instanceof JSONObject) {
writableArray.pushMap(jsonToReact(jsonArray.getJSONObject(i)));
} else if (value instanceof JSONArray){
writableArray.pushArray(jsonToReact(jsonArray.getJSONArray(i)));
} else if (value == JSONObject.NULL){
writableArray.pushNull();
}
}
return writableArray;
}
}
6、js中调用
import React from 'react';
import { NativeModules } from 'react-native';
class NativeDemo extends Component {
jsByAndroid() {
NativeModules.nativeView.给js调用的方法(
{'key':'value'},
(erreor, callback) => {
if(erreor){
//java中callback.invoke(null, wMap)
//第一个参数是erroer
}else{
//java中callback.invoke(null, wMap)
//第二个参数是callback
}
}
)
}
}