如何设置 < Text > Text 为大写

@Cherniv Thanks for the answer

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

iOS textTransform support has been added to react-native in 0.56 version. Android textTransform support has been added in 0.59 version. It accepts one of these options:

• none
• uppercase
• lowercase
• capitalize

The actual iOS commit, Android commit and documentation

Example:

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

React Native .toUpperCase() function works fine in a string but if you used the numbers or other non-string data types, it doesn't work. The error will have occurred.

Below Two are string properties:

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


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

use text transform property in your style tag

textTransform:'uppercase'

use <Text style=\{\{textTransform: 'uppercase'}}>Test

I am using "` `" and "${}" referenced to the variable, this is will turn it to the string, after that by using .toUppercase() function.

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

For example:

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;

There are 2 ways to make text to uppercase in React Native

1. use textTransform in styles of text to change the text in uppercase

e.g

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

textTransform may have following 4 possible value

• none (default)
• uppercase
• lowercase
• capitalize

2. you can also make text to upper or lower case by using Javascript's method i.e .toUpperCase() and .toLowerCase() to do so

e.g

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