android - 是否可以将使用 native react 制作的 GUI 与 native 代码 (kotlin) 中的实用方法相结合？

Question

我有一个完全使用 react native 制作的应用程序。这几乎是一个待办事项列表，结构如下:

<SafeAreaView style={styles.container}>
        <Text style={styles.title} >Registro de pacientes</Text>
        {loading && (
          <ActivityIndicator
            style={styles.loading}
            size="large"
            color="#0066ff"
          />
        )}
        {!loading && (
          <ListaPacientes  
            pacientes={pacientes} 
            onUpdate={this.handleUpdate}
          />
        )}
      </SafeAreaView>

这是列表:

<SectionList
    sections={
      pacientes && pacientes.length ? 
      [
        {title: "Pacientes sin registrar", data: pacientes.filter(paciente => !paciente.done)},
        {title: "Pacientes registrados", data: pacientes.filter(paciente => paciente.done)}
      ] : []
    }
    keyExtractor={paciente => paciente.id}
    renderItem={({item}) => renderItem(item)}
    renderSectionHeader={renderSectionHeader}
    style={styles.container}
    ItemSeparatorComponent={renderSeparator}
    ListEmptyComponent={renderEmptyComponent}
    stickySectionHeadersEnabled={true}
  />

这需要一个客户列表并显示他们的名字。单击后，它们将从列表中删除。很简单。
问题是，客户端列表必须从 csv 文件中读取，并在被点击后更新 csv。我已经有一段代码可以做到这一点。但是，它是用 kotlin 编写的(它是为另一个项目编码的)。
不必在 native react 中再次进行整个数据的获取/读取/处理/更新，我可以以某种方式使用我已经拥有的 kotlin 代码吗？如果是这样，请提供一个关于如何完成的示例？
编辑:为了澄清，我有一个 kotlin 方法，它返回一个字符串数组列表，其中包含我想要存储在列表中的名称。如何从 javascript 调用该方法，获取 arraylist，并将其用作我的 SectionList 的数据源？

lateinit var pacientes: Array<String>

@ReactMethod
fun getListaPacientes() : Array<String> {
    return pacientes
}

像这样的东西？

  var res = []
  res = ListaPacientesModulo.getListaPacientes()

谢谢你。

Answer 1

我已经解决了以下问题:
首先，事实证明，如果您使用的是 expo，则不能使用 native 模块，因此我不得不将其弹出。
其次，为了使用 kotlin，您必须手动安装插件(您可以这样做，但我认为这不值得麻烦所以我改用 java)
说到代码，需要用到“WritableArray”和“WritableMap”。

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;
}

所有的 react 方法都必须返回 void，使用 Promise 或回调来与 react 通信

@ReactMethod
public void readCSV(Promise promise) {

    //Load the list
    for(int i = 0; i < source.size(); i++) {
        this.listWithPeople.add(new Person(source.get(i), startTimes.get(i)));
    }

    //Pepare the map
    WritableArray defList = new WritableNativeArray();
    Gson g = new Gson();

    for(Person p : this.listWithPeople) {
        JSONObject jo = new JSONObject(g.toJson(p));
        WritableMap wm = convertJsonToMap(jo);
        defList.pushMap(wm);
    }


    promise.resolve(defList);

}

最后，在您的 .js 文件中:

import { NativeModules } from 'react-native';

const { NativeModuleName } = NativeModules;

const getPacientes = async () => {
    var peopleList = []

    var res = await NativeModuleName.readCSV()

    for(var i = 0; i < res.length; i++) {
        peopleList.push(newPerson({ name: res[i].name, star: res[i].date, done: false }))
    }

    return peopleList
}

在 android 部分你还需要这个类:
模块名称包.java

public class ModuleNamePackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> nativeModules = new ArrayList<>();
        nativeModules.add(new NativeModuleName(reactContext));
        return nativeModules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

在 MainApplication.java 中，您需要将您的包添加到包列表中:

private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
            packages.add(new ModuleNamePackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };