如何从Android的@ReactMethod向React Native前端传递LinkedTreeMap列表？

React Native与Android原生的桥接层会自动处理LinkedTreeMap这类键值对结构，直接将List<LinkedTreeMap<String, Object>>类型的数据传递给前端即可，无需额外转换。

原生Android端实现 #

首先创建自定义Native模块，在@ReactMethod中构造并返回数据：

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;
import java.util.ArrayList;
import java.util.List;
import java.util.LinkedTreeMap;

public class DataBridgeModule extends ReactContextBaseJavaModule {
    public DataBridgeModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "DataBridgeModule"; // 前端调用时的模块名称
    }

    @ReactMethod
    public void fetchTreeMapData(Promise promise) {
        // 模拟生成你截图中的数据结构，替换为实际数据获取逻辑
        List<LinkedTreeMap<String, Object>> dataList = generateSampleData();
        
        try {
            promise.resolve(dataList); // 直接传递列表，桥接层自动转为RN可识别的数组对象
        } catch (Exception e) {
            promise.reject("DATA_FETCH_FAILED", "获取数据出错", e);
        }
    }

    // 模拟数据生成，对应截图中的结构
    private List<LinkedTreeMap<String, Object>> generateSampleData() {
        List<LinkedTreeMap<String, Object>> dataList = new ArrayList<>();
        
        LinkedTreeMap<String, Object> item = new LinkedTreeMap<>();
        item.put("id", 1);
        item.put("isSelected", false);
        item.put("name", "示例选项1");
        item.put("code", "OPT001");
        // 可根据截图补充更多字段
        dataList.add(item);

        LinkedTreeMap<String, Object> item2 = new LinkedTreeMap<>();
        item2.put("id", 2);
        item2.put("isSelected", true);
        item2.put("name", "示例选项2");
        item2.put("code", "OPT002");
        dataList.add(item2);

        return dataList;
    }
}

React Native前端调用 #

通过NativeModules引入自定义模块，异步获取数据：

import { NativeModules } from 'react-native';

const { DataBridgeModule } = NativeModules;

// 调用原生方法获取数据
DataBridgeModule.fetchTreeMapData()
  .then(dataList => {
    // 数据已自动转为RN数组，可直接操作
    console.log('收到的原生数据：', dataList);
    dataList.forEach(item => {
      console.log('选项名称：', item.name, '是否选中：', item.isSelected);
    });
  })
  .catch(error => {
    console.error('数据获取失败：', error);
  });

注意事项 #

• 确保LinkedTreeMap中的值都是桥接层支持的类型：String、Integer、Boolean、List、Map等，复杂自定义对象需提前转为兼容结构。
• 优先使用Promise异步传递数据，避免阻塞UI线程。
• 如果数据来自网络或数据库查询，直接将返回的LinkedTreeMap列表传入promise.resolve()即可，无需额外转换。

内容的提问来源于stack exchange，提问作者De Silva S