React-Native 组件开发方法

在JS端可以通过UIManager调用UI组件的方法：

UIManager.dispatchViewManagerCommand(
    findNodeHandle(this), // 找到与NativeUI组件对应的JS组件实例
    UIManager.[UI组件名].Commands.[方法],
    [] // 参数
)

Android端：

// 定义命令号
@Override
public @Nullable Map<String, Integer> getCommandsMap() {
  return MapBuilder.of("focusTextInput", FOCUS_TEXT_INPUT, "blurTextInput", BLUR_TEXT_INPUT);
}
// 处理命令
public void receiveCommand(T root, int commandId, @Nullable ReadableArray args) {
    // 根据命令号处理，root为对应View的实例
    switch(commandId) {
        
    }
}

iOS端：

RCT_EXPORT_METHOD(start:(nonnull NSNumber *)reactTag
                  data:data)
{
    [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, TBNAnimationView *> *viewRegistry) {
        // 找到目标View实例
        TBNAnimationView *view = viewRegistry[reactTag];
        if (![view isKindOfClass:[TBNAnimationView class]]) {
            RCTLogError(@"Invalid view returned from registry, expecting TBNAnimationView, got: %@", view);
        } else {
            // 调用View的方法
            [view start:data];
        }
    }];
}

Native事件回调JS端：

Android端使用的是类似JS端调用Native的方式，使用了事件机制，不过事件的接收者是从JS端映射过来的，React下ReactNativeEventEmitter.receiveEvent(tag, topLevelType, nativeEventParam)，所以需要先实现一个Event：（Switch的onValueChange事件）

class ReactSwitchEvent extends Event<ReactSwitchEvent> {
    public static final String EVENT_NAME = "topChange"; // topChange会被映射成onChange，具体映射关系参见 UIManagerModuleConstants.java

    public ReactSwitchEvent(int viewId, boolean isChecked) {
        super(viewId);
        mIsChecked = isChecked;
    }

    public boolean getIsChecked() {
        return mIsChecked;
    }

    @Override
    public String getEventName() {
        return EVENT_NAME;
    }

    @Override
    public short getCoalescingKey() {
        // All switch events for a given view can be coalesced.
        return 0;
    }

    @Override
    public void dispatch(RCTEventEmitter rctEventEmitter) {
        rctEventEmitter.receiveEvent(getViewTag(), getEventName(), serializeEventData());
    }

    private WritableMap serializeEventData() {
        WritableMap eventData = Arguments.createMap();
        eventData.putInt("target", getViewTag());
        eventData.putBoolean("value", getIsChecked());
        return eventData;
    }
}

（编辑：网站开发网_安阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!