注意冬阳，這篇文章討論的是原生組件(Native UI Components)，而不是原生模塊(Native Modules)媳谁。其次涂滴，我會(huì)假設(shè)你已經(jīng)對(duì)原生組件封裝有基本的了解，如果還不了解晴音，請(qǐng)看官方文檔：Android 篇柔纵，iOS 篇。
開始
也許你并不知道锤躁，除了 props搁料，RN 還提供另一種直接調(diào)用原生組件方法的機(jī)制，通過這種機(jī)制系羞，就可以實(shí)現(xiàn) react 組件方法（Refs and the DOM）郭计。內(nèi)置的原生組件就有這樣的實(shí)現(xiàn)：ScrollView#scrollTo、DrawerLayoutAndroid#openDrawer椒振。然而官方文檔并沒有相關(guān)的描述昭伸，不過，我們還是可以通過研究內(nèi)置組件的實(shí)現(xiàn)代碼澎迎，作出一些總結(jié)庐杨。
廢話不多說，直接上結(jié)論夹供，下面以 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用于發(fā)送命令到原生組件 - 第1個(gè)參數(shù)是 component ref
- 第2個(gè)參數(shù)是 command ref灵份，格式為
UIManager[Component].Commands[command] - 第3個(gè)參數(shù)是 command params，必須是數(shù)組
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定義命令映射哮洽，這個(gè)映射也就是 js 端的UIManager[Component].Commands[command] - 在
receiveCommand里處理命令填渠，js 端傳過來的 params 會(huì)被轉(zhuǎn)換成 ReadableArray
iOS
ScrollViewManager.m：
RCT_EXPORT_METHOD(scrollTo:(nonnull NSNumber *)reactTag y:(NSInteger)y) {
ScrollView *scrollView = (ScrollView *) viewRegistry[reactTag];
scrollView.scrollTo(y);
}
iOS 就更簡單了，我想已經(jīng)不需要做太多解釋袁铐。
最后
有一點(diǎn)需要注意：原生組件的命令機(jī)制不能返回?cái)?shù)據(jù)揭蜒。不過，退而求其次剔桨，可以通過事件的方式向 js 端回傳數(shù)據(jù)屉更。
如果你還是不太確定怎么實(shí)現(xiàn)，那么建議你去看 RN 內(nèi)置組件的源代碼洒缀。
