我创建用户界面。它运作良好。但我不知道如何将数据从 Java 发送到 JS？在反应原生模块中，我可以使用回调并激活这个 onClick 事件。但在 UI 中我不知道。
更多关于我需要什么。
我有安卓组件。这样发给JScreateViewInstance(ThemedReactContext reactContext)
并且用户在组件内部发生了一些变化。而我在java类中看到的这些变化。当 JS 请求这些更改时，我需要将这些更改发送给 JS。
你知道如何从 UI 组件向 JS 发送数据吗？请给我一些例子。 谢谢。
【问题讨论】：
标签： android react-native
在gre's answer that put me on the right track, but still left me with a lot of work to do 的基础上，我将尝试解释一些缺失的细节。
有两种基本方法可以做到这一点：
正如 gre 提到的，React Native 文档在 Native UI Components section of Events 中对此进行了解释。
他们展示了如何使用以下代码发送事件：
WritableMap event = Arguments.createMap();
event.putString("message", "MyMessage");
ReactContext reactContext = (ReactContext)getContext();
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
getId(), "topChange", event);
有了这个解释：
事件名称
topChange映射到onChange回调属性 JavaScript（映射在UIManagerModuleConstants.java）。
UIManagerModuleConstants.java 的实际定义如下所示：
"topChange",
MapBuilder.of(
"phasedRegistrationNames",
MapBuilder.of(
"bubbled", "onChange",
"captured", "onChangeCapture")))
即通过在 Android 代码中使用事件 topChange，您可以在 JS 中使用 onChange 或 onChangeCapture 来拦截它。
您可以在其中找到许多其他已声明的事件以供使用。
其中还声明了“直接”事件可能更有用：
"topLayout",
MapBuilder.of("registrationName", "onLayout")
即Android事件topLayout映射到JS事件回调onLayout
(I do not understand the difference between the "bubbled" vs "captured" vs "direct" event types)
要在 JS 中接收事件，请注意文档中引用了 _onChange() 的 3 个位置：
创建回调方法：_onChange(event: Event) {}
在构造函数中绑定：this._onChange = this._onChange.bind(this);
在创建自定义视图时传递它：return <RCTMyCustomView {...this.props} onChange={this._onChange} />;
自定义事件需要在使用前向系统声明，将Android事件映射到JS事件，类似于上面React Native的处理方式。
这是通过覆盖您的ViewManager 中的以下方法之一来完成的：
getExportedCustomBubblingEventTypeConstants()getExportedCustomDirectEventTypeConstants()javadoc 在显示映射应该如何工作方面非常有帮助，但我发现参考上面提到的UIManagerModuleConstants 中的 React Native 代码很有用。
一旦在此处声明，您就可以像使用任何其他“现有”事件一样使用它。
我想将点击事件从 Android 发送到 JS，并将其命名为 onClick。我选择为此使用“直接”事件。我还选择在 Android 和 JS 中使用相同的名称 - 这不是必需的。
需要修改3个文件：
ViewManager 类
此代码将 Android 事件名称“onClick”映射到 JS 函数“onClick”。
/**
* This method maps the sending of the "onClick" event to the JS "onClick" function.
*/
@Nullable @Override
public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
return MapBuilder.<String, Object>builder()
.put("onClick",
MapBuilder.of("registrationName", "onClick"))
.build();
}
查看类
当点击视图时，这段代码会向 JS 发送一个事件。此处使用的名称是 Android 事件名称，它将映射到您在上面的 ViewManager 类中设置的任何内容。
// trigger the onPress JS callback
super.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
final Context context = getContext();
if (context instanceof ReactContext) {
((ReactContext) context).getJSModule(RCTEventEmitter.class)
.receiveEvent(getId(),
"onClick", null);
}
}
});
instanceof 检查之所以存在，是因为此视图有时是在 React 上下文之外的本机代码中引用的。
React Native JS 组件
在构造函数中绑定：
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
声明实际的回调函数：
onClick(event: Event) {
// do something
}
请务必set the callback when rendering your view:
render() {
return <NativeView onClick={this.onClick} />;
}
这样的布局非常简单，但更详细的文档分散在网络上。
【讨论】：
MapBuilder.<String, Object>builder() .put("onClick", MapBuilder.of("registrationName", "onClick")) .build();改写为MapBuilder.of( "onClick", MapBuilder.of("registrationName", "onClick"));
http://facebook.github.io/react-native/docs/native-components-android.html#events
^这显示了如何在 UI 组件上触发从 Java 端到 JS 的事件。
但对于“自定义事件”（未预定义的事件，如 onLoad、onScroll 等），您还需要覆盖 getExportedCustomDirectEventTypeConstants。
这里是一个例子，为 gl-react-native 触发 onGLProgress：
(2) 将事件从 Java 分发到 JS：https://github.com/ProjectSeptemberInc/gl-react-native/blob/0f64a63fec2281e9d6d3641b9061b771a44fcac8/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java#L839-L849
(3) 在 JS 端，你可以给一个onGLProgress prop 回调。
【讨论】：