Làm cách nào để thông báo cho React Native rằng kích thước của chế độ xem tùy chỉnh đã thay đổi?

Question

Tôi đang viết chế độ xem tùy chỉnh cho React Native iOS.

Về cơ bản, tôi phải làm cho văn bản càng lớn càng tốt (dựa trên chế độ xem của chế độ xem hiện tại). Tôi đã thực hiện nó bằng cách ghi đè reactSetFrame và thay đổi khung. Vấn đề duy nhất là vị trí của các điểm là sai, đây là một ảnh chụp màn hình:

Dường như "quản lý bố trí" của phản ứng tự nhiên nghĩ rằng những quan điểm có chiều cao 0.

đây mã:

- (void)reactSetFrame:(CGRect)frame { 
    [super reactSetFrame:frame]; 

    NSLog(@"react set frame %@", NSStringFromCGRect(frame)); 

    [self fitText:self.text]; 
} 

- (void)fitText:(NSString *)text { 
    // ... get the correct font size and expected size  
    [self setFont:font]; 

    CGRect newFrame = self.frame; 

    newFrame.size.height = expectedLabelSize.height; 

    NSLog(@"new frame is %@", NSStringFromCGRect(newFrame)); 

    self.frame = newFrame; 
} 

về cơ bản khi khung thay đổi tôi đang cập nhật khung với kích thước chính xác dựa trên văn bản đã được chuyển.

Các bản ghi đầu ra là thế này:

2017-06-25 16:43:16.434 ABC[44836:6551225] react set frame {{0, 0}, {375, 0}} 
2017-06-25 16:43:16.435 ABC[44836:6551225] new frame is {{0, 0}, {375, 69.197000000000017}} 
2017-06-25 16:43:16.435 ABC[44836:6551225] react set frame {{0, 0}, {375, 0}} 
2017-06-25 16:43:16.436 ABC[44836:6551225] new frame is {{0, 0}, {375, 85.996999999999986}} 

Tôi đã thử gọi reactSetFrame với khung mới một lần nữa nhưng nó không được làm việc. Có cách nào để nói với React Native rằng kích thước của một khung nhìn đã thay đổi không?

Answer 1

Vì vậy, cuối cùng tôi đã tìm được cách để thực hiện việc này; về cơ bản phản ứng bản địa sử dụng một cái nhìn bóng để có được thông tin bố trí. Vì vậy, tôi phải thêm mã này vào trình quản lý của mình

- (RCTShadowView *)shadowView 
{ 
    return [FitTextShadowView new]; 
} 

về cơ bản là cho biết chế độ xem bóng cho thành phần của tôi là gì.

Sau đó, tôi đã phải thay đổi việc thực hiện các chức năng đo lường được sử dụng bởi Yoga để có được chiều cao chính xác:

@implementation FitTextShadowView 

static YGSize RCTMeasure(YGNodeRef node, float width, YGMeasureMode widthMode, float height, YGMeasureMode heightMode) 
{ 
    FitTextShadowView *shadowText = (__bridge FitTextShadowView *)YGNodeGetContext(node); 
    YGSize result; 

    result.width = width; 
    result.height = [shadowText getHeight:shadowText.text thatFits:width]; 
    return result; 
} 

- (instancetype)init 
{ 
    if ((self = [super init])) { 
    YGNodeSetMeasureFunc(self.yogaNode, RCTMeasure); 
    } 
    return self; 
} 

@end