使用正确的 reactTag 响应本机 iOS 本机视图发送事件 [英] React Native iOS Native View send event with proper reactTag

问题描述

我有一个 iOS Native View，它是一个带有地图视图和 UIView 的 UIView.该地图有一个名为regionDidChangeAnimated"的事件，我想将事件发送到 React Native.但是 reactTag 不对.

I have a iOS Native View which is a UIView with a map view and a UIView. The map has a event called 'regionDidChangeAnimated', I want to send event to the React Native. But the reactTag is not right.

- (UIView *)view
{
  CGRect screenRect = [[UIScreen mainScreen] bounds];

  UIView *frameView = [[UIView alloc] initWithFrame:screenRect];

  CGRect frameRect = frameView.bounds;

  MAMapView *mapView;
  mapView = [[MAMapView alloc] initWithFrame:frameRect];
  self.mapview = mapView;
  mapView.delegate = self;

  [frameView addSubview:mapView];

  RCTFixedPin* pin = [[RCTFixedPin alloc] initWithFrame:CGRectMake(0, 0, screenRect.size.width, 260)];
  pin.userInteractionEnabled = NO;
  [frameView addSubview:pin];

  return frameView;
}

- (void)mapView:(MAMapView *)mapView regionDidChangeAnimated:(BOOL)animated {

  if (self.dragging) {
    self.dragging = NO;
  }


  MACoordinateRegion region = mapView.region;
  NSDictionary *event = @{
                          ***@"target": ,***
                          @"region": @{
                              @"latitude": @(region.center.latitude),
                              @"longitude": @(region.center.longitude),
                              @"latitudeDelta": @(region.span.latitudeDelta),
                              @"longitudeDelta": @(region.span.longitudeDelta),
                              }
                          };
  [self.bridge.eventDispatcher sendInputEventWithName:@"topChange" body:event];
}

推荐答案

如果你查看他们已经实现的原生视图的 react-native 代码:

If you look in the react-native code for the native views they have implemented:

https://github.com/facebook/react-native/树/主/反应/视图

看起来文档已经过时，而不是使用:

it looks like the documentation is out of date and rather than using:

[self.bridge.eventDispatcher sendInputEventWithName...

您应该执行以下操作:

@property (nonatomic, copy) RCTBubblingEventBlock onTopChange;

self.onTopChange(@{
  @"region": @{
    @"latitude": @(region.center.latitude),
    @"longitude": @(region.center.longitude),
    @"latitudeDelta": @(region.span.latitudeDelta),
    @"longitudeDelta": @(region.span.longitudeDelta),
  }
};

还有一个 RCTDirectEventBlock 我不确定它和 RCTBubblingEventBlock

There's also a RCTDirectEventBlock I'm not sure what the difference is between that and RCTBubblingEventBlock

查看 RCTComponent.m 第 160-169 行，它应该会自动为您处理目标设置:

Looking in RCTComponent.m lines 160-169 it should handle the target setting for you automatically:

// Special case for event handlers
__weak RCTViewManager *weakManager = _manager;
setterBlock = ^(id target, __unused id source, id json) {
  __weak id<RCTComponent> weakTarget = target;
  ((void (*)(id, SEL, id))objc_msgSend)(target, setter, [RCTConvert BOOL:json] ? ^(NSDictionary *body) {
    body = [NSMutableDictionary dictionaryWithDictionary:body];
    ((NSMutableDictionary *)body)[@"target"] = weakTarget.reactTag;
    [weakManager.bridge.eventDispatcher sendInputEventWithName:RCTNormalizeInputEventName(name) body:body];
  } : nil);
};

同样在 Manager 类中确保添加:

Also in the Manager class make sure you add:

RCT_EXPORT_VIEW_PROPERTY(onTopChange, RCTBubblingEventBlock)

并且不要忘记在 JSX 中实际连接事件:

And don't forget to actually wire up the event in your JSX:

<MyComponent onTopChange={this.handleOnTopChange}/>

这篇关于使用正确的 reactTag 响应本机 iOS 本机视图发送事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！