Pregunta ¿Cómo puedes flotar: justo en React Native?


Tengo un elemento que quiero flotar bien, por ejemplo

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>

¿Cómo puede el Text ser flotado / alineado a la derecha? Además, ¿por qué el Text ocupar el espacio completo de View, en lugar de solo el espacio para "Hola"?


74
2017-08-15 22:33


origen


Respuestas:


Puede especificar directamente la alineación del elemento, por ejemplo:

textright: {    
  alignSelf: 'flex-end',  
},

72
2017-09-16 06:14



¿por qué el Texto ocupa el espacio completo de la Vista, en lugar de solo el espacio para "Hola"?

Porque el View es un contenedor flexible y por defecto tiene flexDirection: 'column' y alignItems: 'stretch', lo que significa que sus hijos deben estirarse para llenar su ancho.

(Nota, por los documentos, ese todas componentes en React Native son display: 'flex' por defecto y eso display: 'inline' no existe en absoluto. De esta manera, el comportamiento predeterminado de un Text Dentro de un View en React Native difiere del comportamiento predeterminado de span Dentro de un div En la red; en este último caso, el lapso no llene el ancho de la div Porque un span es un elemento en línea por defecto. No existe tal concepto en React Native).

¿Cómo se puede flotar / alinear el texto a la derecha?

los float propiedad no existe en React Native, pero hay cargas de opciones disponibles para usted (con comportamientos ligeramente diferentes) que le permitirán alinear correctamente su texto. Aquí están los que puedo pensar:

1. Uso textAlign: 'right' sobre el Text elemento

<View>
  <Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>

(Este enfoque no cambia el hecho de que Text llena todo el ancho de la View; simplemente alinea a la derecha el texto dentro del Text.)

2. Uso alignSelf: 'flex-end' sobre el Text

<View>
  <Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>

Esto encoge el Text elemento al tamaño requerido para mantener su contenido y lo pone al final de la dirección transversal (la dirección horizontal, por defecto) de la View.

3. Uso alignsItems: 'flex-end' sobre el View

<View style={{alignItems: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

Esto es equivalente a establecer alignSelf: 'flex-end' en todo el Viewhijos de

4. Uso flexDirection: 'row' y justifyContent: 'flex-end' sobre el View

<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

flexDirection: 'row' establece que la dirección principal del diseño sea horizontal en lugar de vertical; justifyContent es como alignItems, pero controla la alineación en la dirección principal en lugar de la dirección transversal.

5. Uso flexDirection: 'row' sobre el View y marginLeft: 'auto' sobre el Text

<View style={{flexDirection: 'row'}}>
  <Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>

Este enfoque se demuestra, en el contexto de la web y CSS real, en https://stackoverflow.com/a/34063808/1709587.

6. Uso position: 'absolute' y right: 0 sobre el Text:

<View>
  <Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>

Al igual que en CSS real, esto toma el Text "fuera de flujo", lo que significa que sus hermanos podrán superponerse y su posición vertical estará en la parte superior de la View por defecto (aunque puede establecer explícitamente una distancia desde la parte superior View utilizando el top propiedad de estilo).


Naturalmente, cuál de estos diversos enfoques desea usar, y si la elección entre ellos incluso importa en absoluto, dependerá de sus circunstancias precisas.


69
2017-12-24 15:02



Para mi configuración alignItems a un padre hizo el truco, como:

var styles = StyleSheet.create({
  container: {
    alignItems: 'flex-end'
  }
});

30
2018-02-01 07:53



No se supone que uses flotadores en React Native. React Native aprovecha el flexbox para manejar todo eso.

En su caso, es probable que desee que el contenedor tenga un atributo

justifyContent: 'flex-end'

Y sobre el texto que ocupa todo el espacio, de nuevo, debe echarle un vistazo a su contenedor.

Aquí hay un enlace a una gran guía sobre flexbox: Una guía completa para Flexbox


18
2017-08-16 12:50



<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
  <Text>
  Some Text
  </Text>
</View>

flexDirection: Si quieres moverte horizontalmente (fila) o verticalmente (columna)

justifyContent: la dirección que quieres mover


13
2018-05-19 04:59



Puedes flotar: justo en reaccionar nativo usando flex:

 <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

para más detalles: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction


-1
2018-06-22 05:43