Cách đặt văn bản <Text> thành chữ hoa trong phản ứng gốc

85

Cách đặt <Text> some text </Text>làm chữ hoa trong phản ứng gốc

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

Cần thể hiện Test đó dưới dạng TEST.

react-native

— Thivya
nguồn

19

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

— Ivan Chernykh

125

Hỗ trợ textTransform của iOS đã được thêm vào react-native trong phiên bản 0.56. Hỗ trợ textTransform của Android đã được thêm vào phiên bản 0.59. Nó chấp nhận một trong các tùy chọn sau:

không ai
chữ hoa
chữ thường
viết hoa

Cam kết iOS thực tế , cam kết Android và tài liệu

Thí dụ:

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

— Đen
nguồn

113

@Cherniv Cảm ơn vì câu trả lời

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

— Thivya
nguồn

6

Đây không thực sự là một giải pháp. Điều gì sẽ xảy ra nếu tôi muốn chuyển văn bản thành chữ hoa?

— Michal

16

@Michal văn bản hoạt ảnh thành chữ hoa sẽ trông như thế nào, nghe có vẻ như một hiệu ứng cực kỳ thú vị mà tôi không thể tưởng tượng được ngay bây giờ.

— Noitidart

2

@Michal Sử dụng Lottie để tạo các hoạt ảnh thú vị, ngay cả với văn bản. Bạn có thể tạo hoạt ảnh tùy chỉnh thông qua Adobe After Effects, Ví dụ .

— Yeshan Jay

6

Đây không phải là câu trả lời chính xác nữa. Có kiểu mặc định trong React Native để chuyển đổi văn bản. Vui lòng kiểm tra câu trả lời của tôi dưới đây.

— Đen

3

Hàm React Native .toUpperCase () hoạt động tốt trong một chuỗi nhưng nếu bạn đã sử dụng numbershoặc other non-string data types, nó không hoạt động. Ý errormuốn đã xảy ra.

Dưới Hai là thuộc tính chuỗi:

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

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

— Najathi
nguồn