Componente dell'interfaccia utente nativa di dimensioni dinamiche per React Native

Question

Voglio costruire iOS reagisce al componente nativo - analogico di Testo, dove larghezza e altezza non sono note, ma calcolate dinamicamente a seconda del suo contenuto. Come vedo dal debug, il metodo RCTText.drawRect viene chiamato con rect calcolato già, ma il mio componente viene chiamato con rect vuoto se non ho definito le dimensioni tramite gli stili.

Come definire il rect necessario per la visualizzazione personalizzata?

Answer 1

La risposta è nel concetto di vista 'ombra'. Sembra non documentato, ma React Native usa le viste 'ombra' per calcolare il layout prima del rendering effettivo. classe in modo RCTShadowText viene utilizzato per il layout di tag e la sua funzione 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

è possibile utilizzare la proprietà onLayout sulla vista testo e vedere se ha più linee che si desidera avere. Così si dovrebbe fare quanto segue:

1. utilizzare una larghezza iniziale per l'elemento di testo
2. attesa per onLayout al fuoco e calcolare quanta larghezza del componente di testo avrebbe bisogno in base alle dimensioni resi
3. impostare il calcolati larghezza, causando un rerender con la larghezza calcolata