52

我必须将要显示的文本的第一个字母大写。我搜索了它，但我找不到明确的做法，text在 react native 官方文档中也没有这样的道具。

我正在使用以下格式显示我的文本：

<Text style={styles.title}>{item.item.title}</Text>

或者

<Text style={styles.title}>{this.state.title}</Text>

我该怎么做？

欢迎提出建议？

4

12 回答 12

60

写一个这样的函数

Capitalize(str){
return str.charAt(0).toUpperCase() + str.slice(1);
}

然后从<Text>标签调用它通过将文本作为参数传递

<Text>{this.Capitalize(this.state.title)} </Text>
于 2018-01-22T18:49:34.473 回答
42

您还可以text-transform在样式中使用 css 属性：

<Text style={{textTransform: 'capitalize'}}>{this.state.title}</Text>
于 2019-01-02T12:18:59.547 回答
26

React native 现在可以让你直接用textTransform: 'capitalize'. 没有必要的功能。

import React from 'react'
import { StyleSheet, Text } from 'react-native'

// will render as Hello!
const Caps = () => <Text style={styles.title}>hello!</Text>

export default Caps

const styles = StyleSheet.create({ 
 title: { 
   textTransform: 'capitalize'
 }
})
于 2019-11-14T23:07:23.947 回答
18

代替使用函数，更简洁的方法是将其编写为通用组件。

import React from 'react';
import { View, Text } from 'react-native';

const CapitalizedText = (props) => {
  let text = props.children.slice(0,1).toUpperCase() + props.children.slice(1, props.children.length);

  return (
      <View>
        <Text {...props}>{text}</Text>
      </View>
  );
};

export default CapitalizedText;

无论您在哪里使用<Text>，都将其替换为<CapitalizedText>

于 2018-01-22T19:45:25.913 回答
9

只需使用 javascript。

text.slice(0,1).toUpperCase() + text.slice(1, text.length)

于 2018-01-22T18:01:09.863 回答
8

简单 有 2 个选项是可能的。 选项 1：使用.toUpperCase() 选项 2：eith CsstextTransform: 'capitalize'

于 2020-10-11T08:42:43.243 回答
4

TextInput 有这个处理使用

autoCapitalize enum('none', 'sentences', 'words', 'characters')

例如尝试这样

<TextInput
     placeholder=""
     placeholderTextColor='rgba(28,53,63, 1)'
     autoCapitalize = 'none'
     value ='test'
     />
于 2018-09-05T05:57:37.827 回答
3

这对我有用！

labelStyle:{
        textTransform: 'capitalize',
        fontSize:20,

      },
于 2020-05-18T09:11:00.370 回答
1

由于这是非常通用的功能，我将它放在strings.js我的库下的一个文件中：

// lib/strings.js

export const CapitalizeFirstLetter = (str) => {
  return str.length ? str.charAt(0).toUpperCase() + str.slice(1) : str
}

只需将其导入需要它的组件中：

import React from 'react';
import { View, Text } from 'react-native';
import { CapitalizeFirstLetter} from 'lib/strings'

export default function ComponentWithCapitalizedText() {

  return <Text>CapitalizeFirstLetter("capitalize this please")</Text>

}
于 2019-08-21T12:29:05.840 回答
1

是的，可以通过以下任何一个步骤将 react native 中的文本/字符串的第一个字母大写：

第 1 步：在项目文件中调用FirstCapitalize函数

const FirstCapitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
  }

然后

 <Text style={{fontsize:10}}> {FirstCapitalize('hello world')} </Text>

第 2 步：只需为文件中的Text组件设置样式

<Text style={{fontsize:10,textTransform: 'capitalize'}}>hello world</Text>
于 2021-11-23T13:53:35.750 回答
1

有两种选择是可能的。

选项 1 :-使用 javascript

写一个函数

  Capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
  }

利用 ：-

<Text style={{}}> {this.Capitalize('test')} </Text>

选项 2：-与样式表一起使用 textTransform css。

<Text style={{textTransform: 'capitalize'}}>test</Text>
于 2020-10-10T18:04:57.763 回答
0

我刚刚添加了一个原型函数，基于@mayuresh 答案

String.prototype.Capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

并像这样使用它：

myStr.Capitalize()
于 2019-11-22T09:02:42.857 回答