React Native에서 텍스트를 세로 (90도 회전)로 만들려면 어떻게해야합니까?

101

<Text />React Native에서 수직 (90도 회전)을 어떻게 만들 수 있습니까? 화면 가장자리를 따라 페이지 오른쪽에 텍스트를 추가하고 싶습니다.

react-native

— Dev01
소스

답변:

220

변형을 사용할 수 있습니다.

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

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

— 디바인
소스

@JacobLauritzen은 React Native에서 작동합니다! 지금 테스트했으며 버전 0.52.0에서 작동합니다.

— shimatai

@shimatai 대단해! 그래도 해결책이 아니라 이전 (현재 삭제 된) 의견에 답장했습니다. 솔루션은 훌륭하게 작동합니다.

— Jacob Lauritzen

제 경우에는 텍스트가 Touchable로 래핑되어 있습니다. 그리고 회전 후에도 터치 가능한 영역은 변경되지 않은 것처럼 보입니다. 어떤 생각?

— chengsam

@chengsam Offhand 나는 당신이 Touchable을 회전해야 할 수도 있다고 생각합니다 (또는 Touchable을 회전하면 어린이라면 텍스트도 회전 할 것입니다).

— Matthew McCord

-1

creat보기

            <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,

— 오마르 바흐 쉬
소스