传递自定义对象的数组列表以从 android 响应本机端答案

【问题标题】：pass an arraylist of custom objects to react native side from android传递自定义对象的数组列表以从 android 响应本机端
【发布时间】：2019-01-23 22:02:37
【问题描述】：

我有一个自定义对象列表 (List)。我需要将此数据发送到 React Native 端以显示在平面列表中。我该怎么做？这个列表出现在

类 NativeToReact(reactContext: ReactApplicationContext,userManager: IUserManager) : ReactContextBaseJavaModule(reactContext)`

【问题讨论】：

标签： android react-native react-native-bridge

【解决方案1】：

由于您想发送ArrayList，因此您必须从本机端发送WritableArray 到 react-native。

public class NativeToReactModule extends ReactContextBaseJavaModule {

  public NativeToReactModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "NativeToReactModule";
  }

  private static WritableMap convertJsonToMap(JSONObject jsonObject) throws JSONException {
    WritableMap map = new WritableNativeMap();

    Iterator<String> iterator = jsonObject.keys();
    while (iterator.hasNext()) {
      String key = iterator.next();
      Object value = jsonObject.get(key);
      if (value instanceof JSONObject) {
        map.putMap(key, convertJsonToMap((JSONObject) value));
      } else if (value instanceof Boolean) {
        map.putBoolean(key, (Boolean) value);
      } else if (value instanceof Integer) {
        map.putInt(key, (Integer) value);
      } else if (value instanceof Double) {
        map.putDouble(key, (Double) value);
      } else if (value instanceof String) {
        map.putString(key, (String) value);
      } else {
        map.putString(key, value.toString());
      }
    }
    return map;
  }

  @ReactMethod
  public void returnArrayOfObjects(Callback successCallback) throws JSONException {
    List<CustomObject> aList = new ArrayList<CustomObject>();
    Gson g = new Gson();

    aList.add(new CustomObject("Nameone", 1));
    aList.add(new CustomObject("nametwo", 132));

    WritableArray array = new WritableNativeArray();
    for (CustomObject co : aList) {
      JSONObject jo = new JSONObject(g.toJson(co));
      WritableMap wm = convertJsonToMap(jo);
      array.pushMap(wm);
    }

    successCallback.invoke(array);
  }
}

在 react-native 方面，您可以为您的原生模块创建一个 javascript 模块，如下所示：

import { NativeModules } from "react-native";
module.exports = NativeModules.NativeToReactModule;

然后您可以访问您从本机端发送的ArrayList。

import NativeToReact from "./NativeToReactModule";

...
...
...

NativeToReact.returnArrayOfObjects(array => {
  console.log(array, "The array you sent from the native side");
});

注意：答案并未显示使用本机模块的完整设置。

【讨论】：

【解决方案2】：

您必须将您的列表映射到 JSON 对象

【讨论】：

【解决方案3】：

从10101010 的答案扩展（或减少？），您应该/可以使用 FB 的辅助类来转换值。

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
import com.myapp.SomeClass;

public class NativeToReactModule extends ReactContextBaseJavaModule {

  public NativeToReactModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "NativeToReactModule";
  }

  @ReactMethod
  public void getArray(Callback successCallback) {
    WritableArray array = Arguments.fromList(SomeClass.SomeStaticListValue);
    successCallback.invoke(array);
  }
}

那么在 JS 端，只需调用：

import { NativeModules } from "react-native"

NativeModules.NativeToReactModule.getArray(array => console.log(array, "The array you sent from the native side"))

【讨论】：