javascript - React-native中的ReadableMap接口(interface)是如何将JS转JAVA的？

Question

我正在尝试了解如何将选项从 react-native 的 js 端正确传递到 java 端。

react-native bridge 使用ReadableMap转换，但作为一个 Java 新手，我无法理解它是如何工作的。

更具体的我不明白:

• 实际转化是如何进行的？
• 如何判断下游 Java 代码需要什么类型/格式？
• 如何正确使用 ReadableMap 来做到这一点？

通常我想知道它是如何工作的，但我会给出我正在查看的具体示例以提供一些背景信息。

---

一个 react-native 包公开了一个日期时间选择器。

JS端有一个showTimePicker方法:

showTimePicker(date, callback) {
    date = date || new Date();
    console.log(this.props);
    debugger
    var options = {
        ...this.props,
        hour:date.getHours(),
        minute:date.getMinutes()
    };
    RCTDateTimePicker.showTimePicker(options, function (hour, minute) {
        date.setHours(hour);
        date.setMinutes(minute);
        callback(date);
    });
}

RCTDateTimePicker.showTimePicker 桥接到 Java method在 native 方面:

@ReactMethod
public void showTimePicker(ReadableMap options, Callback callback) {
    DialogFragment timePicker = new TimePicker(options, callback);
    timePicker.show(activity.getFragmentManager(), "timePicker");
}

调用

public TimePicker(ReadableMap options, Callback callback) {
    final Calendar c = Calendar.getInstance();
    this.callback = callback;
    hour = options.hasKey("hour") ? options.getInt("hour") : c.get(Calendar.HOUR_OF_DAY);
    minute = options.hasKey("minute") ? options.getInt("minute") : c.get(Calendar.MINUTE);
}

它创建了一个 Android 实例 TimePicker .我的目标是将 Timepicker 的样式从 watch 更改为微调器。

有一个可设置的 XML 属性 android:timePickerMode="spinner" 但我认为我不能通过 react-native 传递 XML 属性，可以吗？

我还在评论中发现了一个建议通过 defStyleAttr这样做，但我不明白该怎么做。

Answer 1

首先，查看Argument Types的列表来自 Android Native 模块的 React Native 文档。

Argument Types

The following argument types are supported for methods annotated with @ReactMethod and they directly map to their JavaScript equivalents

• Boolean -> Bool
• Integer -> Number
• Double -> Number
• Float -> Number
• String -> String
• Callback -> function
• ReadableMap -> Object
• ReadableArray -> Array

因此，您可以通过更新 JS 端传递的 options 来将 timePickerMode 的额外字段作为字符串传递以包含它。

var options = {
    ...this.props,
    hour:date.getHours(),
    minute:date.getMinutes(),
    timePickerMode:"spinner"
};

然后在您的自定义 TimePicker 构造函数中从 ReadableMap 获取该值。

String timePickerMode = options.hasKey("timePickerMode") ?
        options.getString("timePickerMode") : defaultTimePickerMode;

现在您有了要设置的值。不幸的是，timePickerMode 似乎无法以编程方式设置。 This SO question询问如何做，@alanv(其个人资料表明他们是 Google 的软件工程师)表示这在运行时是不可能的。