React Native 原生组件封装：js 调用原生组件方法

注意，这篇文章讨论的是原生组件(Native UI Components)，而不是原生模块(Native Modules)。其次，我会假设你已经对原生组件封装有基本的了解，如果还不了解，请看官方文档：Android 篇，iOS 篇。

开始

也许你并不知道，除了 props，RN 还提供另一种直接调用原生组件方法的机制，通过这种机制，就可以实现 react 组件方法（Refs and the DOM）。内置的原生组件就有这样的实现：ScrollView#scrollTo、DrawerLayoutAndroid#openDrawer。然而官方文档并没有相关的描述，不过，我们还是可以通过研究内置组件的实现代码，作出一些总结。

废话不多说，直接上结论，下面以 ScrollView#scrollTo 为例

Component

ScrollView.js：

// @flow
import React, {PureComponent} from 'react'
import {findNodeHandle, UIManager} from 'react-native'

export default class ScrollView extends PureComponent {
  _sendCommand(command: string, params?: []) {
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(this),
      UIManager.RNScrollView.Commands[command],
      params,
    )
  }
  
  scrollTo(y: number) {
    this._sendCommand('scrollTo', [y])
  }
}

1. UIManager.dispatchViewManagerCommand 用于发送命令到原生组件
2. 第1个参数是 component ref
3. 第2个参数是 command ref，格式为 UIManager[Component].Commands[command]
4. 第3个参数是 command params，必须是数组

Android

ScrollViewManager.java：

public class ScrollViewManager extends ViewGroupManager<ScrollView> {
  public static final int SCROLL_TO = 1;
  
  @Override
  public @Nullable Map<String, Integer> getCommandsMap() {
    return MapBuilder.of("scrollTo", SCROLL_TO);
  }
  
  @Override
  public void receiveCommand(ScrollView root, int commandId, @Nullable ReadableArray args) {
    if (commandId == SCROLL_TO) {
      root.scrollTo(args);
    }
  }
}

1. 通过 getCommandsMap 定义命令映射，这个映射也就是 js 端的 UIManager[Component].Commands[command]
2. 在 receiveCommand 里处理命令，js 端传过来的 params 会被转换成 ReadableArray

iOS

ScrollViewManager.m：

RCT_EXPORT_METHOD(scrollTo:(nonnull NSNumber *)reactTag y:(NSInteger)y) {
  ScrollView *scrollView = (ScrollView *) viewRegistry[reactTag];
  scrollView.scrollTo(y);
}

iOS 就更简单了，我想已经不需要做太多解释。

最后

有一点需要注意：原生组件的命令机制不能返回数据。不过，退而求其次，可以通过事件的方式向 js 端回传数据。

如果你还是不太确定怎么实现，那么建议你去看 RN 内置组件的源代码。