在React Native上为android创建自定义UI组件.如何将数据发送给JS？

Question

我创建UI.它运作良好.但我不知道如何将数据从Java发送到JS？在本机模块中,我可以使用回调并激活这个onClick事件.但在UI我不知道.

更多关于我需要什么.我有android组件.以这种方式发送给JScreateViewInstance(ThemedReactContext reactContext)

和用户内部组件的变化.我在java类中看到了这些变化.当JS要求时,我需要将这些更改发送给JS.

您知道如何将数据从UI组件发送到JS吗？请举个例子.谢谢.

Answer 1

基于gre的答案让我走上正轨,但仍然需要做很多工作,我将尝试解释一些缺失的细节.

有两种基本方法可以做到这一点:

1. 使用现有的事件类型
2. 创建和使用自定义事件类型

现有活动

正如gre所提到的,React Native文档在Events的Native UI Components部分解释了这一点.

它们显示了如何使用以下代码发送事件:

  WritableMap event = Arguments.createMap();
  event.putString("message", "MyMessage");
  ReactContext reactContext = (ReactContext)getContext();
  reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
      getId(), "topChange", event);

有了这个解释:

事件名称topChange映射到onChangeJavaScript中的回调道具(映射在其中UIManagerModuleConstants.java).

UIManagerModuleConstants.java看起来像这样的实际定义:

"topChange",
    MapBuilder.of(
        "phasedRegistrationNames",
            MapBuilder.of(
                "bubbled", "onChange", 
                "captured", "onChangeCapture")))

即,通过使用topChangeAndroid代码中的事件,您可以使用此映射onChange或者onChangeCapture由于此映射在JS中拦截它.

你可以在那里找到许多其他现有的事件来捎带.

声明的"直接"事件可能更有用:

"topLayout", 
    MapBuilder.of("registrationName", "onLayout")

即Android事件topLayout映射到JS事件回调onLayout

(我不明白"冒泡"与"捕获"与"直接"事件类型之间的区别)

要在JS中接收事件,请注意_onChange()文档中引用的3个位置:

1. 创建回调方法: _onChange(event: Event) {}

2. 在构造函数中绑定它: this._onChange = this._onChange.bind(this);

3. 创建自定义视图时传递它: 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 Native JS组件

在构造函数中绑定:

  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

声明实际的回调函数:

  onClick(event: Event) {
    // do something
  }

确保在渲染视图时设置回调:

  render() {
    return <NativeView onClick={this.onClick} />;
  }

这样布局时非常简单,但更精细细节的文档散布在网络上.

Answer 2

http://facebook.github.io/react-native/docs/native-components-android.html#events

^这显示了如何在UI组件上触发从Java端到JS的事件.

但对于"自定义事件"(未预定义的事件,如onLoad,onScroll等),您还需要覆盖getExportedCustomDirectEventTypeConstants.

这是一个示例,为gl-react-native触发onGLProgress:

(1)定义自定义事件映射:https://github.com/ProjectSeptemberInc/gl-react-native/blob/7d6e83de5a8280d06d47234fe756aa3050e9b9a1/android/src/main/java/com/projectseptember/RNGL/GLCanvasManager.java#L115-L116

(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道具回调.