Question

我们可以通过使用RCT_EXPORT_VIEW_PROPERTY导出本机属性来控制自定义本机UI组件的属性。

但是如何导出本机UI组件的实例方法？

Answer 1

这可以在自定义本机组件的视图管理器中完成。

对象侧：在本机视图管理器中公开这样的本机方法：

关键是传入reactTag，它是对本机组件的引用。

MyCoolViewManager.m：

RCT_EXPORT_METHOD(myCoolMethod:(NSNumber *)reactTag callback:(RCTResponseSenderBlock)callback) {
  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, RCTSparseArray *viewRegistry) {
    MyCoolView *view = viewRegistry[reactTag];
    if (![view isKindOfClass:[MyCoolView class]]) {
      RCTLogMustFix(@"Invalid view returned from registry, expecting MyCoolView, got: %@", view);
    }
    // Call your native component's method here
    [view myCoolMethod];
  }];
}

JS方面：在react组件类中添加API：

MyCoolView.js：

var React = require('react-native');
var NativeModules = require('NativeModules');
var MyCoolViewManager = NativeModules.MyCoolViewManager;
var findNodeHandle = require('findNodeHandle');

class MyCoolView extends React.Component{
    // ...
    myCoolMethod() {
        return new Promise((resolve, reject) => {
            MyCoolViewManager.myCoolMethod(
                findNodeHandle(this),
                (error, result) => {
                    if (error) {
                        reject(error);
                    } else {
                        resolve(result);
                    }
                }
            );
        });
    }
}

Answer 2

我不是Objective C专家，而是Swift开发人员。

为了便于阅读，我最好使用这种方式（ Obj-C可能有缺点？）：

在Manager中：在实例私有属性中存储对视图的引用
然后它将有助于调用您的视图方法

Obj-C方面 - 组件经理：

@implementation RNAnalogClockManager {
  RNAnalogClock* _AnalogClock;
}

RCT_EXPORT_MODULE()

- (UIView *)view
{
  // keep a reference to the view before returning it
  _AnalogClock = [[RNAnalogClock alloc] init];
  return _AnalogClock;
}

// export method and easily call view method 
RCT_EXPORT_METHOD(startRealTime) {
  [_AnalogClock startRealTime];
};

JS方面保持不变

注意：我的示例中不需要回调，但它不会改变原理，它只是另一个参数。

如何在React Native中访问本机UI组件的实例方法

2 个答案: