允许原生 iOS 组件在 React Native 中设置自己的高度

Question

我正在包装一个现有的 iOS 组件，它希望控制自己的高度。所以该组件将修改其框架属性但当然 RN 会根据应用的样式进行布局，因此忽略它。我正在寻找一种允许组件在 React Native 布局中自行调整大小的好方法。

我可以覆盖 setFrame 方法并通过事件将新高度传回 JS 代码，然后设置高度样式，但似乎必须有更简单的方法！

有什么建议吗？

Answer 1

似乎每次高度变化时都引发一个事件是可行的方法。我通过子类化现有组件并覆盖 setFrame 和 setReactFrame（来自 React UIKit 类别）来做到这一点

- (void) notifyNewHeight:(CGFloat) height {
    _currentHeight = height;
    NSDictionary *event =  @{
                             @"target": self.reactTag,
                             @"height": [NSNumber numberWithFloat: _currentHeight]
                             };
    [_eventDispatcher sendInputEventWithName:@"VENTokenFieldChangeHeight" body:event];
}

- (void) setReactTag:(NSNumber *)reactTag
{
    [super setReactTag:reactTag];
    [self notifyNewHeight:self.frame.size.height];
}

- (void) setFrame:(CGRect)frame
{
    if (frame.size.height != _currentHeight && self.reactTag != NULL) {
        [self notifyNewHeight:frame.size.height];
    }
    [super setFrame: frame];
}

您还需要在管理器中定义事件：

- (NSDictionary *)customDirectEventTypes
{
    return @{
             @"VENTokenFieldChangeHeight": @{
                     @"registrationName": @"onTokenFieldChangeHeight"
                     }
             };
}

虽然不漂亮，但很管用。

因为我已经回答了我自己的问题，所以我暂时不接受我的回答，以防万一有人有更好的解决方案！

允许原生 iOS 组件在 React Native 中设置自己的高度

Allowing a native iOS component to set its own height in React Native

react-native