ReactNative与Android原生交互、通信、传参、回调、填坑

最新推荐文章于 2024-06-25 02:24:41 发布

Earliest-Mlr

最新推荐文章于 2024-06-25 02:24:41 发布

阅读量2k

点赞数 1

分类专栏： Android 文章标签： react native android 交互

本文链接：https://blog.csdn.net/u013208026/article/details/126300071

版权

Android 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

文末有相关问题解决，
如：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
				}
			}
        )
	}
}