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

Question

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

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

需要将 Test 显示为 TEST。

Answer 1

@Cherniv 感谢回答

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

Answer 2

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

none
大写
小写
大写

实际iOS commit, Android commit and 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>

Answer 3

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

下面两个是字符串属性：

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

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

Answer 4

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

textTransform:'uppercase'

Answer 5

使用测试

Answer 6

我正在使用“``”和“${}”引用变量，这会将其转换为字符串，之后使用 .toUppercase() 函数。

`${todo.title}`.toUppercase() }

例如：

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 中将 <Text> 文本设置为大写

How to set <Text> text to upper case in react native

react-native

uppercase