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

103

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

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,

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