在 React Native 上为 android 创建自定义 UI 组件.如何向JS发送数据? [英] Creating Custom UI component for android on React Native. How to send data to JS?

问题描述

我创建用户界面.它运作良好.但我不知道如何将数据从 Java 发送到 JS?在反应原生模块中，我可以使用回调并激活这个 onClick 事件.但在用户界面我不知道.

I create UI. It works well. But i don't know how to send data from Java to JS? In react native moduls I can use callback and activete this onClick events. But in UI i don't know.

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

More about what I need. I have android component. Send it to JS this way createViewInstance(ThemedReactContext reactContext)

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

and users something change inside component. And these changes I see in java class. I need to send these changes to the JS when JS ask for them.

你知道如何从 UI 组件向 JS 发送数据吗?请给我一些例子.谢谢.

You know how to send data from UI component to JS? Please give me some example. Thank you.

推荐答案

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

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

^this shows how you can trigger events from Java side to JS on an UI component.

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

but for "custom events" (events that are not pre-defined likes onLoad, onScroll, etc..) you will also need to override getExportedCustomDirectEventTypeConstants.

这里有一个例子，为 gl-react-native 触发 onGLProgress:

Here is an example, triggering onGLProgress for gl-react-native:

(1) 定义自定义事件映射:https://github.com/ProjectSeptemberInc/gl-react-native/blob/7d6e83de5a8280d06d47234fe756aa3050e9b9a1/android/com/Manager/mainGLsept/android/com/ProjectSeptemberInc/gl-react-native/blob/7d6e83de5a8280d06d47234.java#L115-L116

(1) define the custom event mapping: 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/ember/src/GL/GLCanvas.java#L839-L849

(2) dispatch the event from Java to JS: https://github.com/ProjectSeptemberInc/gl-react-native/blob/0f64a63fec2281e9d6d3641b9061b771a44fcac8/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java#L839-L849

(3) 并且在 JS 端，你可以给一个 onGLProgress 道具回调.

(3) and on the JS side, you can give a onGLProgress prop callback.

这篇关于在 React Native 上为 android 创建自定义 UI 组件.如何向JS发送数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！