是否可以在本机反应中将文本/字符串的第一个字母大写？怎么做？答案

【问题标题】：Is it possible to capitalize first letter of text/string in react native? How to do it?是否可以在本机反应中将文本/字符串的第一个字母大写？怎么做？
【发布时间】：2018-07-01 09:57:06
【问题描述】：

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

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

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

或

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

我该怎么做？

欢迎提出建议？

【问题讨论】：

标签： react-native text react-native-android react-native-text

【解决方案1】：

这样写一个函数

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

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

<Text>{this.Capitalize(this.state.title)} </Text>

【讨论】：

怎么可能使用样式表，
文本输入中的每个单词怎么样？
@VarunChandran 使用textTransform: 'capitalize'。看我的回答：stackoverflow.com/a/58867901/7869175

【解决方案2】：

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

<Text style={{textTransform: 'capitalize'}}>{this.state.title}</Text>

【讨论】：

这仅适用于所有小写文本。 (1) 如果你有“heLLo”，这会将文本变成“HeLLo”。 (2) 如果你想要 "Hello" 作为结果，你可以使用 "heLLo".toLowerCase() 和 textTransform: 'capitalize' css。
这将大写输入中的每个单词。这可能没问题，但 OP 只要求首字母大写。
为什么 React Native 很难像标准 CSS 那样实现大写字母... 内容的第一个字母，而不是每个单词的... sigh

【解决方案3】：

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'
 }
})

【讨论】：

【解决方案4】：

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

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>

【讨论】：

【解决方案5】：

只需使用 javascript。

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

【讨论】：

我用过它，但我必须为我用过的每个text 标签写它。我可以通过传递参数来调用text 标记中的函数，因为该文本和所有其他文本都可以使用该函数大写。
我想你的意思是<Text>{autoCapitalize(text)}。你当然可以这样做
<Text>{this.autoCapitalize(text)}</Text> 这是写
@mayureshpatil：我的建议也有误。
@mayureshpatil 错误提示 autpCapitalize(text) 不是函数

【解决方案6】：

简单有 2 个选项是可能的。 选项 1：使用 .toUpperCase() 选项 2：无论是 Css textTransform: 'capitalize'

【讨论】：

简单易行的解决方案。

【解决方案7】：

TextInput 有这个处理使用

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

例如这样尝试

<TextInput
     placeholder=""
     placeholderTextColor='rgba(28,53,63, 1)'
     autoCapitalize = 'none'
     value ='test'
     />

【讨论】：

【解决方案8】：

这对我有用！

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

      },

【讨论】：

【解决方案9】：

由于这是非常通用的功能，我将它放在我的库下名为 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>

}

【讨论】：

【解决方案10】：

有两种选择。

选项 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>

【讨论】：

【解决方案11】：

是的，在 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>

【讨论】：

【解决方案12】：

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

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

并像这样使用它：

myStr.Capitalize()

【讨论】：