Thành phần giao diện người dùng có kích thước động nguyên bản cho React Native

Question

Tôi muốn xây dựng thành phần gốc phản ứng iOS - tương tự của Văn bản, nơi chiều rộng và chiều cao không được biết, nhưng được tính động tùy thuộc vào nội dung của nó. Như tôi thấy từ gỡ lỗi, phương pháp RCTText.drawRect được gọi là với tính toán rect đã có, nhưng thành phần của tôi được gọi là với rect trống nếu tôi không xác định kích thước thông qua phong cách.

Cách xác định nội dung cần thiết cho Chế độ xem tùy chỉnh?

Answer 1

Câu trả lời nằm trong khái niệm chế độ xem 'bóng'. Dường như không được ghi lại, nhưng React Native sử dụng chế độ xem 'bóng' để tính toán bố cục trước khi hiển thị thực tế. lớp Vì vậy RCTShadowText được sử dụng để bố trí các thẻ và chức năng của nó RCTMeasure:

static css_dim_t RCTMeasure(void *context, float width) 
{ 
    RCTShadowText *shadowText = (__bridge RCTShadowText *)context; 
    NSTextStorage *textStorage = [shadowText buildTextStorageForWidth:width]; 
    NSLayoutManager *layoutManager = textStorage.layoutManagers.firstObject; 
    NSTextContainer *textContainer = layoutManager.textContainers.firstObject; 
    CGSize computedSize = [layoutManager usedRectForTextContainer:textContainer].size; 

    css_dim_t result; 
    result.dimensions[CSS_WIDTH] = RCTCeilPixelValue(computedSize.width); 
    if (shadowText->_effectiveLetterSpacing < 0) { 
    result.dimensions[CSS_WIDTH] -= shadowText->_effectiveLetterSpacing; 
    } 
    result.dimensions[CSS_HEIGHT] = RCTCeilPixelValue(computedSize.height); 
    return result; 
} 

Answer 2

Bạn có thể sử dụng các tài sản trên onLayout độ xem văn bản và xem nếu nó có nhiều dòng mà bạn muốn có. Vì vậy, bạn sẽ làm như sau:

1. sử dụng có chiều rộng ban đầu cho mục văn bản
2. chờ onLayout để bắn và tính toán bao nhiêu chiều rộng thành phần văn bản của bạn sẽ cần phải dựa trên kích thước render
3. thiết lập các tính chiều rộng, gây ra hiện tượng lại với chiều rộng được tính