如何在React Native中将<Text>文本设置为大写


85

如何<Text> some text </Text>在React Native中设置为大写

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

需要证明该测试为TEST。


19
<Text style={{}}> {'Test'.toUpperCase()} </Text>
伊万·切尔尼赫

Answers:


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
这不是真正的解决方案。如果我想将文本动画化为大写怎么办?
米哈尔

16
@Michal文本动画大写会是什么样子,听起来像是一个超酷的效果,我现在简直无法想象。
Noitidart

2
@Michal使用Lottie可以制作炫酷的动画,甚至带有文本。您可以通过Adobe After Effects示例创建自定义动画。
Yeshan Jay

6
这不再是正确的答案。React Native中有默认样式用于文本转换。请在下面检查我的答案。
黑色

3

React Native .toUpperCase()函数在字符串中可以正常工作,但如果使用numbersor other non-string data types,则无法正常工作。该error会时有发生。

下面两个是字符串属性:

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

<Text>{props.affordability.toUpperCase()}</Text>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.