React Native에서 <Text> 텍스트를 대문자로 설정하는 방법

85

<Text> some text </Text>React Native에서 대문자 로 설정하는 방법

<Text style={{}}> Test </Text>

해당 테스트를 TEST로 표시해야합니다.

react-native

— 티비 아
소스

19

<Text style={{}}> {'Test'.toUpperCase()} </Text>

— Ivan Chernykh 2016 년

125

iOS textTransform 지원이 0.56 버전에서 react-native에 추가되었습니다. Android textTransform 지원이 0.59 버전에 추가되었습니다. 다음 옵션 중 하나를 허용합니다.

없음
대문자
소문자
대문자로하다

실제 iOS 커밋 , Android 커밋 및 문서

예:

<View>
  <Text style={{ textTransform: 'uppercase'}}>
    This text should be uppercased.
  </Text>
  <Text style={{ textTransform: 'capitalize'}}>
    Mixed:{' '}
    <Text style={{ textTransform: 'lowercase'}}>
      lowercase{' '}
    </Text>
  </Text>
</View>

— 검정
소스

113

@Cherniv 답변 주셔서 감사합니다

<Text style={{}}> {'Test'.toUpperCase()} </Text>

— 티비 아
소스

6

이것은 실제로 해결책이 아닙니다. 텍스트를 대문자로 애니메이션하려면 어떻게해야합니까?

— Michal

16

@Michal 대문자로의 텍스트 애니메이션이 어떻게 생겼는지, 지금 당장은 상상할 수없는 매우 멋진 효과처럼 들립니다.

— Noitidart

2

@Michal Lottie 를 사용 하여 텍스트로도 멋진 애니메이션을 만듭니다. Adobe After Effects, Example을 통해 사용자 정의 애니메이션을 만들 수 있습니다 .

— Yeshan 제이

6

더 이상 정답이 아닙니다. React Native에는 텍스트 변환을위한 기본 스타일이 있습니다. 내 대답을 확인하십시오.

— Black

3

React Native .toUpperCase () 함수는 문자열에서 잘 작동하지만 numbersor 를 사용하면 other non-string data types작동하지 않습니다. 가 error발생합니다.

아래 2 개는 문자열 속성입니다.

<Text>{props.complexity.toUpperCase()}</Text>

<Text>{props.affordability.toUpperCase()}</Text>

— 나 자티
소스