注意，这篇文章讨论的是原生组件(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])
}
}
-
UIManager.dispatchViewManagerCommand用于发送命令到原生组件 - 第1个参数是 component ref
- 第2个参数是 command ref，格式为
UIManager[Component].Commands[command] - 第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);
}
}
}
- 通过
getCommandsMap定义命令映射，这个映射也就是 js 端的UIManager[Component].Commands[command] - 在
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 内置组件的源代码。
