Native dynamische UI-Komponente für React Native

Question

Ich möchte iOS reagieren native Komponente - Analog von Text, wo Breite und Höhe ist nicht bekannt, aber dynamisch berechnet abhängig von seinem Inhalt. Wie ich aus dem Debugging ersehen kann, wird die RCTText.drawRect-Methode bereits mit rect berechnet, aber meine Komponente wird mit leerer rect aufgerufen, wenn ich die Größen nicht über Styles definiert habe.

Wie definiert man rect für die benutzerdefinierte Ansicht?

Answer 1

Die Antwort ist im "Schatten" View-Konzept. Es sieht so aus, als sei es nicht dokumentiert, aber React Native verwendet 'Schatten'-Ansichten, um das Layout vor dem eigentlichen Rendern zu berechnen. So RCTShadowText Klasse ist für das Layout-Tag und seine RCTMeasure Funktion:

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

Sie konnten die onLayout Eigenschaft auf der Textansicht verwenden und sehen, ob es weitere Linien, die Sie haben möchten. So würden Sie wie folgt vor:

1. eine anfängliche Breite verwenden für den Text Artikel
2. warten onLayout Feuer und zu berechnen, wie viel Breite Ihre Textkomponente auf den gerenderten Dimensionen müssen basierend würde
3. die berechnete Satz width, verursacht einen rerender mit der berechneten Breite