¿Cómo puedo hacer que el texto sea vertical (girado 90 grados) en react native?

103

¿Cómo puedo hacer <Text />vertical (girado 90 grados) en reaccionar nativo? Quiero tener algo de texto en el lado derecho de la página a lo largo del borde de la pantalla.

react-native

— Dev01
fuente

Respuestas:

221

Puedes usar una transformación.

https://facebook.github.io/react-native/docs/transforms.html#proptypes

myStyle: {
    transform: [{ rotate: '90deg'}]
}

— d-vid
fuente

@JacobLauritzen ¡funciona en React Native! Lo he probado ahora y funciona con la versión 0.52.0.

— Shimatai

@shimatai increíble! Sin embargo, estaba respondiendo a un comentario anterior (ahora eliminado), no a la solución. La solución funciona muy bien.

— Jacob Lauritzen

En mi caso, el texto está envuelto en un Touchable. Y después de la rotación, el área tocable parece permanecer sin cambios. ¿Alguna idea?

— chengsam

@chengsam Offhand Supongo que es posible que también necesites rotar el Touchable (o tal vez al rotar el Touchable también rotará el texto si es un niño).

— Matthew McCord

-1

vista creativa

            <View style={styles.arrow_1_6} ></View>

agregue en estilo transform: [{rotate: '14deg'}], si hace que la posición de la vista sea absoluta, ¡no afectará a otra vista!

el inicio de la rotación de 0 a 360 grados.

   arrow_1_6: {
   transform: [{ rotate: '14deg' }],
  width: 260,
  marginTop: 145,
  position: 'absolute',
  marginLeft: 75,
  backgroundColor: 'orange',
  height: 4,
  flexDirection: "row",
  padding: 0,
  alignItems: 'center',
  justifyContent: 'flex-start',
  borderBottomColor: '#075fff',
  borderBottomWidth: 4,

— Omar bakhsh
fuente