Можно ли загладить первую букву текста/строки в ответной нативной? Как это сделать?

Мне нужно загладить первую букву текста, которую я хочу отобразить. Я искал его, но я не мог найти четкую вещь, чтобы сделать это, а также нет таких реквизитов для text в официальной официальной документации.

Я показываю свой текст в следующем формате:

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

или же

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

Как мне это сделать?

Предложения приветствуются?

Ответы

Ответ 1

Напишите функцию, подобную этой

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

затем вызовите его из <Text> Передавая текст как параметр

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

Ответ 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>

Ответ 3

Вы также можете использовать свойство text-transform css в стиле:

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

Ответ 4

просто используйте javascript.

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

Ответ 5

TextInput должен обрабатывать

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

например, попробуйте сделать это

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

Ответ 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>

}