Visualizzazione automatica della larghezza nativa per testo all'interno di

Question

Come noto, il foglio di stile nativo react non supporta la proprietà min-width/max-width.

Ho una vista e un testo all'interno. La vista in larghezza automatica non viene ridimensionata per elemento di testo ereditato.

Come risolvere il problema e impostare automaticamente la larghezza della vista utilizzando la larghezza del testo?

Il mio codice è:

<View style={{backgroundColor: '#000000'}}> 
     <Text style={{color: '#ffffff'}}>Sample text here</Text> 
</View> 

In comune HTML/CSS vorrei realizzare così:

<div style="background-color: #000; display: inline;">Sample text here</div> 

Avviso: flex: 1 sulla vista padre non è utile per me. testo appare come

"Sam" 
"ple" 
"Tex" 
"t" 

Answer 1

Si dovrebbe provare con flex: 1 che consentirà comportamento FlexBox:

<View style={{backgroundColor: '#000000', flex: 1}}> 
    <Text style={{color: '#ffffff'}}>Sample text here</Text> 
</View> 

Answer 2

"alignSelf" fa la stessa cosa come 'display: inline-block' avrebbe in comune HTML/CSS e funziona molto bene per me.

<View style={{backgroundColor: '#000000', alignSelf: 'flex-start' }}> 
<Text style={{color: '#ffffff'}}> 
    Sample text here 
</Text> 
</View>