Symulacja wyświetlania: wbudowany w Natywny reaguje

Question

React Native nie obsługuje właściwości CSS display, a wszystkie elementy domyślnie korzystają z zachowania display: flex (również). Większość nieelastycznych układów można symulować za pomocą właściwości flex, ale jestem poruszony tekstem śródliniowym.

Moja aplikacja zawiera kontener zawierający kilka słów w tekście, z których niektóre wymagają formatowania. Oznacza to, że muszę użyć rozpiętości, aby wykonać formatowanie. W celu owijania przęseł mogę ustawić pojemnik tak, aby używał flex-wrap: wrap, ale pozwoli to tylko na zawijanie na końcu przęsła, a nie na tradycyjne liniowe zachowanie zawijania przy dzieleniu wyrazów.

Problem wizualizowane (przęsła w kolorze żółtym):

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

Czy istnieje sposób, aby uzyskać odpowiednie opakowanie i prawdziwą symulację inline przy użyciu właściwości Flex?

Answer 1

Można uzyskać ten efekt poprzez owijanie elementów tekstowych w innych elementów tekstowych drodze byś owinąć rozpiętość w div lub inny element:

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

Można również uzyskać ten efekt poprzez zadeklarowanie flexDirection:” właściwość row na elemencie nadrzędnym wraz z flexWrap: "wrap". Dzieci następnie będą wyświetlać w wierszu:

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

Sprawdź przykład: this.

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