Question

我必须将我要显示的第一个字母大写。我搜索了它，但我找不到明确的事情，也没有text反应原生官方文档中的道具。

我以下列格式显示我的文字：

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

或

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

我该怎么做？

欢迎提出建议？

Answer 1

写一个这样的函数

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

然后从<Text>标记中调用它将文本作为参数传递

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

Answer 2

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

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 3

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

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

Answer 4

只需使用javascript。

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

Answer 5

TextInput可以使用

进行处理

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

例如，尝试这样

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

Answer 6

现在，React native可以让您直接使用textTransform: 'capitalize'使文本大写。不需要任何功能。

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

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

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

Answer 7

这对我有用！

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

      },

Answer 8

简单可以使用2个选项。 选项1 ：带有.toUpperCase() 选项2 ：Css textTransform: 'capitalize'

Answer 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>

}

Answer 10

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

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

并像这样使用它：

myStr.Capitalize()

Answer 11

有两个选择是可能的。

选项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 个答案: