Как отправить событие клика из React Native с помощью компонента моста UI в iOS / Objective-C

Question

Моему приложению необходимо вызвать метод в собственном iOS SDK (Esri Mapping), и я реализовал отправку события с RN (0.55) на Android через мост со следующим кодом:

BaseEsriMap Component:

import React, { Component } from 'react';
import { requireNativeComponent, UIManager, findNodeHandle } from 'react-native';

const RNTMap = requireNativeComponent('RNTEsriMaps', null);

class BaseEsriMap extends Component {
  recenterMap = () => {
    console.log('Recenter requested');
    UIManager.dispatchViewManagerCommand(
      findNodeHandle(this.mapRef),
      UIManager.RNTEsriMaps.Commands.recenterMap,
      [],
    );
  };

  render() {
    return (
      <RNTMap
        style={ { flex: 1 } }
        ref={ (component) => { this.mapRef = component; } }
      />
    );
  }
}

export default BaseEsriMap;

RNTEsriMapsManager:

...
public class RNTEsriMapsManager extends ViewGroupManager<MapViewLayout> {
  public static final String REACT_CLASS = "RNTEsriMaps";

  public static final int COMMAND_RECENTER_MAP = 1;

  @Override
  protected MapViewLayout createViewInstance(ThemedReactContext reactContext) {
    MapViewLayout mapViewLayout = new MapViewLayout(reactContext);
    return mapViewLayout;
  }
...
  @Override
  public Map<String,Integer> getCommandsMap() {
    return MapBuilder.of(
            "recenterMap",
            COMMAND_RECENTER_MAP
            );
  }

  @Override
  public void receiveCommand(
        MapViewLayout esriMapView,
        int commandType,
        @Nullable ReadableArray args) {
    Assertions.assertNotNull(esriMapView);
    Assertions.assertNotNull(args);
    switch (commandType) {
        case COMMAND_RECENTER_MAP: {
            Log.d("Recenter", "COMMAND_RECENTER_MAP");
            return;
        }
        default:
            throw new IllegalArgumentException(String.format(
                    "Unsupported command %d received by %s.",
                    commandType,
                    getClass().getSimpleName()));
      }
  }
}

Я считаю, что код должен быть добавлен в мой RNTEsriMapsManager.m.

#import "RNTEsriMapsManager.h"
#import "EsriMapView.h"

@implementation RNTEsriMapsManager

RCT_EXPORT_MODULE()

-(UIView*)view {
  EsriMapView *mapView = [[EsriMapView alloc] init];
  mapView.mapDelegate = self;
  return mapView;
}

// recenterMap implementation here?
@end

Как я могу расширить свой код, чтобы сделать то же самое на iOS?

Answer 1

Один из способов сделать это, выставив метод:

#import "RNTEsriMapsManager.h"
#import "EsriMapView.h"


@interface RNTEsriMapsManager ()
@property (nonatomic, strong) EsriMapView *mapView;
@end

@implementation RNTEsriMapsManager

RCT_EXPORT_MODULE()
RCT_EXPORT_METHOD(recenterMap)
{
  NSLog(@"Method called to recenter map");
  [self.mapView mapViewsFunctionToRecenter];
}

-(UIView*)view {
  if (!self.mapView) {
    self.mapView = [[EsriMapView alloc] init];
    self.mapView.mapDelegate = self;
  }

  return self.mapView;
}

Затем в своем javascript вы можете вызвать его как функцию на RNTMap const:

import { NativeModules } from 'react-native';
const mapManager = NativeModules.RNTEsriMapsManager;
mapManager.recenterMap();

Я сделал вид карты свойством иметь доступ к нему в методе, потому что я предполагаю, что у него есть метод, который можно было бы использовать для его повторного ввода.