如何在本机反应中将 <Text> 文本设置为大写

Posted 2023-02-23

【中文标题】如何在本机反应中将 <Text> 文本设置为大写

【英文标题】：How to set <Text> text to upper case in react native

【发布时间】：2016-06-19 04:45:03

【问题描述】：

如何在 react native 中设置<Text> some text </Text> 为大写？

<Text style=> Test </Text>

需要将Test 显示为TEST。

【问题讨论】：

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

【参考方案1】：

ios textTransform 支持在 0.56 版本中添加到 react-native。 android textTransform 支持已在 0.59 版本中添加。它接受以下选项之一：

无 大写 小写 大写

实际的iOS commit、Android commit 和documentation

例子：

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

【参考方案2】：

在样式标签中使用文本转换属性

textTransform:'uppercase'

【参考方案3】：

React Native .toUpperCase() 函数在字符串中工作正常，但如果你使用 numbers 或 other non-string data types，它就不起作用。 error 将会发生。

下面两个是字符串属性：

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

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

【参考方案4】：

@Cherniv 感谢您的回答

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

【讨论】：

这并不是真正的解决方案。如果我想将文本动画化为大写怎么办？

@Michal 将文本动画转为大写会是什么样子，听起来很酷的效果我现在无法想象。

@Michal 使用Lottie 制作很酷的动画，即使是文字。您可以通过 Adob​​e After Effects 创建自定义动画，Example。

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