Simula display: inline in React Native

Question

React Native non supporta la proprietà CSS display e, per impostazione predefinita, tutti gli elementi utilizzano il comportamento di display: flex (non inline-flex). La maggior parte dei layout non flessibili può essere simulata con proprietà flex, ma sono confuso con il testo in linea.

La mia app ha un contenitore che contiene diverse parole nel testo, alcune delle quali richiedono una formattazione. Ciò significa che ho bisogno di usare span per realizzare la formattazione. Al fine di ottenere il wrapping degli span, posso impostare il contenitore per utilizzare flex-wrap: wrap, ma questo consentirà solo il wrapping alla fine di uno span piuttosto che il tradizionale comportamento in linea del wrapping alle interruzioni di parole.

Il problema visualizzate (campate in giallo):

(via http://codepen.io/anon/pen/GoWmdm?editors=110)

C'è un modo per ottenere il corretto confezionamento e vera simulazione in linea utilizzando le proprietà di flessione?

Answer 1

È possibile ottenere questo effetto avvolgendo gli elementi di testo in altri elementi di testo il modo in cui si avvolgere un arco in un div o di un altro elemento:

<View> 
    <Text><Text>This writing should fill most of the container </Text><Text>This writing should fill most of the container</Text></Text>  
</View> 

è anche possibile ottenere questo effetto dichiarando un flexDirection:' riga 'proprietà sul genitore insieme a un flexWrap:' wrap '. I bambini verranno visualizzati in linea:

<View style={{flexDirection:'row', flexWrap:'wrap'}}> 
    <Text>one</Text><Text>two</Text><Text>Three</Text><Text>Four</Text><Text>Five</Text> 
</View> 

Verificare l'esempio this.

https://rnplay.org/apps/-rzWGg