¿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.

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,
    

    }, ingrese la descripción de la imagen aquí

Omar bakhsh
fuente