Как сделать текст вертикальным (повернутым на 90 градусов) в React Native?

103

Как я могу сделать <Text />вертикальный (повернутый на 90 градусов) в react native? Я хочу, чтобы текст располагался в правой части страницы по краю экрана.

Dev01
источник

Ответы:

221

Вы можете использовать трансформацию.

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

myStyle: {
    transform: [{ rotate: '90deg'}]
}
d-лоза
источник
@JacobLauritzen работает в React Native! Я тестировал прямо сейчас и работает с версией 0.52.0.
shimatai
@shimatai круто! Я отвечал на предыдущий (теперь удаленный) комментарий, но не на решение. Решение отлично работает.
Джейкоб Лауритцен
В моем случае текст заключен в Touchable. И после вращения зона прикосновения, кажется, не изменилась. Любая идея?
chengsam
@chengsam Навскидку Я бы предположил, что вам может потребоваться также повернуть Touchable (или, может быть, поворот Touchable также повернёт текст, если это ребенок).
Мэтью МакКорд,
-1

Creat View

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

добавьте преобразование стиля: [{rotate: '14deg'}], если вы сделаете позицию представления абсолютной, это не повлияет на другое представление!

  • вращение начинается от 0 до 360 градусов.

       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,
    

    }, введите описание изображения здесь

Омар бахш
источник