React-Native 组件开发方法

iOS端：

// 定义暴露的方法，以Promise的形式返回结果
RCT_EXPORT_METHOD(getCurrentConnectivity:(RCTPromiseResolveBlock)resolve
                  reject:(__unused RCTPromiseRejectBlock)reject)
{
  resolve(@{@"network_info": _status ?: RCTReachabilityStateUnknown});
}

// 发送网络状态变更事件
[self sendEventWithName:@"networkStatusDidChange" body:@{@"network_info": status}];

*数据类型：

• iOS下因为有id类型，所以限制不大，跟JS对象一致
• Android下需要手动读取对象值
  • Null
  • Boolean
  • Number
  • String
  • Map
  • Array

NativeUI组件

UI组件要复杂一些，需要定义ViewManager和具体View的实现，ViewManager用来创建/管理View实例，是View实例和React之间沟通的桥梁。

Android端ViewManager可继承自SimpleViewManager、ViewGroupManager

以图片组件Image为例：

组件的JS端代码：

// 引用Native组件
const RCTImageView = requireNativeComponent('RCTImageView', Image);

// 组件代码
<RCTImageView
  {...this.props}
  style={style}
  resizeMode={resizeMode}
  tintColor={tintColor}
  source={sources}
/>

定义组件名称：

ViewManager：

Android端：

// 定义组件名称
public static final String REACT_CLASS = "RCTImageView";

@Override
public String getName() {
  return REACT_CLASS;
}

// 创建组件实例
@Override
public ReactImageView createViewInstance(ThemedReactContext context) {
return new ReactImageView(
    context,
    getDraweeControllerBuilder(),
    getCallerContext());
}

iOS端：

RCT_EXPORT_MODULE()

// RCT_EXPORT_MODULE的宏定义
#define RCT_EXPORT_MODULE(js_name) 
RCT_EXTERN void RCTRegisterModule(Class); 
+ (NSString *)moduleName { return @#js_name; } 
+ (void)load { RCTRegisterModule(self); }

// Implemented by RCT_EXPORT_MODULE
+ (NSString *)moduleName;

- (UIView *)view
{
  return [[RCTImageView alloc] initWithBridge:self.bridge];
}

定义组件属性：

JS端传递属性的形式是：

<RCTImageView
  {...this.props}
  // 属性
  style={style}
  resizeMode={resizeMode}
  tintColor={tintColor}
  source={sources}
/>

Android端：

@ReactProp(name = "src")
public void setSource(ReactImageView view, @Nullable ReadableArray sources) {
  view.setSource(sources);
}

iOS端：

RCT_EXPORT_VIEW_PROPERTY(blurRadius, CGFloat)
RCT_REMAP_VIEW_PROPERTY(defaultSource, defaultImage, UIImage)
RCT_CUSTOM_VIEW_PROPERTY(tintColor, UIColor, RCTImageView)
{
  view.tintColor = [RCTConvert UIColor:json] ?: defaultView.tintColor;
  view.renderingMode = json ? UIImageRenderingModeAlwaysTemplate : defaultView.renderingMode;
}

定义组件方法：

在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;
    }
}

（编辑：云计算网_泰州站长网）

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