原生与 React Native 之间的通信

在集成现有应用指南和原生 UI 组件指南中，我们学习了如何在原生组件中嵌入 React Native 以及反之亦然。当我们混合使用原生和 React Native 组件时，最终会需要在这两个世界之间进行通信。一些实现此目标的方法已在其他指南中提到。本文总结了可用的技术。

简介

React Native 受到 React 的启发，因此信息流的基本思想是类似的。React 中的信息流是单向的。我们维护一个组件层次结构，其中每个组件仅依赖于其父组件和自身内部状态。我们通过属性来实现这一点：数据以自上而下的方式从父组件传递到其子组件。如果祖先组件依赖于其后代组件的状态，则应传递一个回调函数，以便后代组件使用该回调函数来更新祖先组件。

同样的概念也适用于 React Native。只要我们在框架内完全构建我们的应用程序，我们就可以使用属性和回调函数来驱动我们的应用程序。但是，当我们混合使用 React Native 和原生组件时，我们需要一些特定的跨语言机制来允许我们在它们之间传递信息。

属性

属性是跨组件通信最直接的方式。因此，我们需要一种方法来双向传递属性，即从原生传递到 React Native，以及从 React Native 传递到原生。

从原生传递属性到 React Native

您可以通过在主活动中提供 ReactActivityDelegate 的自定义实现来将属性传递到 React Native 应用。此实现应覆盖 getLaunchOptions 以返回包含所需属性的 Bundle。

Java
Kotlin

public class MainActivity extends ReactActivity {
  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected Bundle getLaunchOptions() {
        Bundle initialProperties = new Bundle();
        ArrayList<String> imageList = new ArrayList<String>(Arrays.asList(
                "https://dummyimage.com/600x400/ffffff/000000.png",
                "https://dummyimage.com/600x400/000000/ffffff.png"
        ));
        initialProperties.putStringArrayList("images", imageList);
        return initialProperties;
      }
    };
  }
}

class MainActivity : ReactActivity() {
    override fun createReactActivityDelegate(): ReactActivityDelegate {
        return object : ReactActivityDelegate(this, mainComponentName) {
            override fun getLaunchOptions(): Bundle {
                val imageList = arrayListOf("https://dummyimage.com/600x400/ffffff/000000.png", "https://dummyimage.com/600x400/000000/ffffff.png")
                val initialProperties = Bundle().apply { putStringArrayList("images", imageList) }
                return initialProperties
            }
        }
    }
}

import React from 'react';
import {View, Image} from 'react-native';

export default class ImageBrowserApp extends React.Component {
  renderImage(imgURI) {
    return <Image source={{uri: imgURI}} />;
  }
  render() {
    return <View>{this.props.images.map(this.renderImage)}</View>;
  }
}

ReactRootView 提供了一个可读写的属性 appProperties。设置 appProperties 后，React Native 应用将使用新的属性重新渲染。只有当新的更新属性与之前的属性不同时，才会执行更新。

Java
Kotlin

Bundle updatedProps = mReactRootView.getAppProperties();
ArrayList<String> imageList = new ArrayList<String>(Arrays.asList(
        "https://dummyimage.com/600x400/ff0000/000000.png",
        "https://dummyimage.com/600x400/ffffff/ff0000.png"
));
updatedProps.putStringArrayList("images", imageList);

mReactRootView.setAppProperties(updatedProps);

var updatedProps: Bundle = reactRootView.getAppProperties()
var imageList = arrayListOf("https://dummyimage.com/600x400/ff0000/000000.png", "https://dummyimage.com/600x400/ffffff/ff0000.png")

随时更新属性都没有问题。但是，更新必须在主线程上执行。您可以在任何线程上使用 getter。

无法一次只更新几个属性。我们建议您将其构建到您自己的包装器中。

注意：目前，顶级 RN 组件的 JS 函数 componentWillUpdateProps 在属性更新后不会被调用。但是，您可以在 componentDidMount 函数中访问新的属性。

从 React Native 传递属性到原生

公开原生组件属性的问题在本文中进行了详细介绍。简而言之，需要在 JavaScript 中反映的属性需要公开为使用 @ReactProp 注释的 setter 方法，然后在 React Native 中像使用普通 React Native 组件一样使用它们。

属性的限制

跨语言属性的主要缺点是它们不支持回调函数，回调函数可以让我们处理自下而上的数据绑定。假设您有一个小的 RN 视图，您希望将其从原生父视图中移除，作为 JS 操作的结果。使用属性无法做到这一点，因为信息需要自下而上地传递。

虽然我们有跨语言回调的变体（此处描述），但这些回调并不总是我们需要的。主要问题是它们并非旨在作为属性传递。相反，此机制允许我们从 JS 触发原生操作，并在 JS 中处理该操作的结果。

其他跨语言交互方式（事件和原生模块）

如上一章所述，使用属性会有一些限制。有时属性不足以驱动我们的应用程序逻辑，我们需要一个更灵活的解决方案。本章介绍了 React Native 中可用的其他通信技术。它们可用于内部通信（RN 中 JS 和原生层之间）以及外部通信（RN 和应用程序的“纯原生”部分之间）。

React Native 使您能够执行跨语言函数调用。您可以从 JS 执行自定义原生代码，反之亦然。不幸的是，根据我们所处的方面，我们以不同的方式实现相同的目标。对于原生，我们使用事件机制来安排 JS 中处理程序函数的执行，而对于 React Native，我们直接调用原生模块导出的方法。

从原生调用 React Native 函数（事件）

事件在本文中进行了详细描述。请注意，使用事件并不能保证执行时间，因为事件是在单独的线程上处理的。

事件功能强大，因为它们允许我们更改 React Native 组件，而无需引用它们。但是，在使用它们时，您可能会遇到一些陷阱。

由于事件可以从任何地方发送，因此它们可能会在您的项目中引入意大利面条式依赖关系。
事件共享命名空间，这意味着您可能会遇到一些名称冲突。冲突不会被静态检测到，这使得它们难以调试。
如果您使用相同 React Native 组件的多个实例，并且希望从事件的角度区分它们，则可能需要引入标识符并将其与事件一起传递（您可以使用原生视图的 reactTag 作为标识符）。

从 React Native 调用原生函数（原生模块）

原生模块是在 JS 中可用的 Java/Kotlin 类。通常，每个 JS 桥接器会创建每个模块的一个实例。它们可以向 React Native 导出任意函数和常量。它们在本文中进行了详细介绍。

警告：所有原生模块共享相同的命名空间。在创建新的模块时，请注意名称冲突。

简介​

属性​

从原生传递属性到 React Native​

从 React Native 传递属性到原生​

属性的限制​

其他跨语言交互方式（事件和原生模块）​

从原生调用 React Native 函数（事件）​

从 React Native 调用原生函数（原生模块）​

简介

属性