如何在react native中将<Text>文本设置为大写

添加了iOS textTransform支持,以在0.56版本中进行本机反应。在0.59版本中添加了Android textTransform支持。它接受以下选项之一:

• 没有一个
• 大写
• 小写字母
• 资本化

实际 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>

@切尔尼夫谢谢你的回答

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

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

textTransform:'uppercase'

ReactNative.toUpperCase()函数在字符串中运行良好,但如果使用 numbers 或 other non-string data types ,它不起作用。这个 error 将发生。

以下两个是字符串属性:

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

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

使用<文本样式={{textTransform:“大写”}}>测验

我正在使用“ ` ` “和” ${} “引用变量时,this将其转换为字符串,之后使用 .to大写() 作用

`${todo.title}`。to大写()}

例如:

import React from 'react';

const Todo = ({ todo }) => {
    console.log("DEBUG:<components/todo.js>:",todo)
    return (
        <article className="Todo" style={{ backgroundColor: todo.completed ? 'aqua' : '#f9a1a1' }}>
            <div className="Todo-info">
                <h3>{ typeof todo.title === "string" && `${todo.title}`.toUpperCase() }</h3>
            </div>
        </article>
    );
};

export default Todo;

在React Native中,有两种方法可以将文本改为大写

1. 使用 textTransform 在文本样式中更改大写文本

例如

<Text style={{ textTransform: 'uppercase'}}>
    Some text
 </Text>

text转换 可能有以下4种可能的值

• 没有一个 (默认)
• 大写
• 小写字母
• 资本化

2. 您还可以使用 Javascript的 方法,即 .to上盒() 和 .至下壳体() 这样做

例如

<Text>{'Some text'.toUpperCase()}</Text>