Как использовать методы экземпляров собственных пользовательских интерфейсов в React Native

Мы можем контролировать собственные свойства компонентов пользовательского интерфейса, экспортируя собственные свойства с помощью RCT_EXPORT_VIEW_PROPERTY.

Но как экспортировать методы экземпляра собственных компонентов пользовательского интерфейса?

Ответ 1

Благодаря @alinz .

Это можно сделать в настраиваемом диспетчере представлений собственных компонентов.

Obj-c сторона: в менеджере собственных представлений выведите собственный метод, подобный этому:

Ключ должен передать 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 method here
    [view myCoolMethod];
  }];
}

JS-сторона: добавьте 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);
                    }
                }
            );
        });
    }
}

Ответ 2

Я не специалист Objective C, а разработчик Swift.

Я лучше использую этот способ только для удобства чтения (возможно, есть недостатки в 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-сторона остается той же

ПРИМЕЧАНИЕ. Мне не нужен обратный вызов в моем примере, но он не меняет принцип, это просто еще один параметр.