Як я можу зробити текст вертикальним (повернутий на 90 градусів) у рідній реакції?

101

Як я можу зробити <Text />вертикальний (повернутий на 90 градусів) у рідній реакції? Я хочу мати трохи тексту в правій частині сторінки вздовж краю екрана.

react-native

— Dev01
джерело

Відповіді:

220

Ви можете використовувати трансформацію.

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

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

— d-лоза
джерело

@JacobLauritzen це працює в React Native! Я тестував прямо зараз, і він працює з версією 0.52.0.

— shimatai

@shimatai чудово! Я відповідав на попередній (тепер видалений) коментар, проте, не рішення. Рішення чудово працює.

— Jacob Lauritzen

Для мого випадку текст загортається в Touchable. А після обертання доторкається область, здається, залишається незмінною. Будь-яка ідея?

— chengsam

@chengsam Offhand Я вважаю, що вам, можливо, доведеться також повернути Touchable (або, можливо, обертання Touchable також поверне текст, якщо це дитина).

— Метью Маккорд

-1

Creat view

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

додати у стилі перетворення: [{повернути: '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,

— Омар Бахш
джерело