是否可以在 React Native 中将 text/string 的首字母大写？怎么做？

Question

我必须将要显示的文本的首字母大写。我搜索了它，但找不到明确的方法，而且在 React Native 官方文档中也没有 text 这样的道具。

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

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

或

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

我该怎么做？

欢迎提出建议？

Answer 1

只需使用 javascript.

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

Answer 2

像这样写一个函数

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

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

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

Answer 3

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

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>

Answer 4

TextInput 使用

来处理这个问题

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

例如这样试试

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

Answer 5

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

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

Answer 6

因为这是非常通用的功能，所以我将它放在我的库下一个名为 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>

}

Answer 7

React native 现在允许您直接使用 textTransform: 'capitalize' 将文本转换为大写。不需要功能。

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

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

const styles = StyleSheet.create({ 
 title: { 
   textTransform: 'capitalize'
 }
})

Answer 8

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

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

并像这样使用它：

myStr.Capitalize()

Answer 9

这对我有用！

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

      },

Answer 10

如果只想将输入的第一个字母大写:

function CapitalizeFirstLetterOfInput () {

const onInputUppercase = (e) => {
    let firstLetter = e.target.value.charAt(0);
    e.target.value = firstLetter.toUpperCase() + e.target.value.slice(1);
  };
  
return (
  <div>
 <input onInput={onInputUppercase}/>
  </div>
)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

Answer 11

如果有人有兴趣通过 css/style

{props.alert.type}!

here inner {} is for object {textTransform: 'capitalize'}

是否可以在 React Native 中将 text/string 的首字母大写？怎么做？

Is it possible to capitalize first letter of text/string in react native? How to do it?

text

react-native

react-native-text

react-native-android