style - react js css class

Simular pantalla: en línea en React Native

Question

React Native no admite la propiedad de display CSS y, de forma predeterminada, todos los elementos utilizan el comportamiento de display: flex (tampoco en inline-flex ). La mayoría de los diseños no flexibles se pueden simular con propiedades flexibles, pero estoy nervioso con el texto en línea.

Mi aplicación tiene un contenedor que contiene varias palabras en texto, algunas de las cuales necesitan formato. Esto significa que necesito usar intervalos para realizar el formateo. Para lograr el ajuste de los intervalos, puedo configurar el contenedor para que utilice flex-wrap: wrap , pero esto solo permitirá el ajuste al final de un intervalo en lugar del comportamiento en línea tradicional de ajuste en los saltos de palabras.

El problema visualizado (se extiende en amarillo):

(a través de http://codepen.io/anon/pen/GoWmdm?editors=110 )

¿Hay alguna forma de obtener un ajuste adecuado y una verdadera simulación en línea utilizando las propiedades de flexión?

Answer 1

No he encontrado una forma adecuada de insertar bloques de texto con otro contenido. Nuestra solución actual "hackish" es dividir cada palabra de una cadena de texto en su propio bloque, por lo que flexWrap se ajusta correctamente para cada palabra.

Answer 2

Puede obtener este efecto envolviendo elementos de texto en otros elementos de texto de la forma en que envolvería un tramo en un div u otro 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>

También puede obtener este efecto declarando una propiedad flexDirection: ''row'' en el padre junto con un flexWrap: ''wrap''. Los niños entonces mostrarán en línea:

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

Echa un vistazo a this ejemplo.

this

Answer 3

Solo puede anidar nodos de texto sin utilizar flex para obtener el efecto deseado. Así: https://facebook.github.io/react-native/docs/text

<Text style={{fontWeight: ''bold''}}>
I am bold
<Text style={{color: ''red''}}>
and red
</Text>
</Text>