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

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

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

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

Answer 3

React native теперь позволяет делать текст в верхнем регистре напрямую с помощью textTransform: 'capitalize'. Никаких функций не требуется.

import React from 'react'
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 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>

Answer 5

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

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

Answer 6

Простой Это возможно с 2 вариантами.Вариант 1: с .toUpperCase()Вариант 2: eith Css textTransform: 'capitalize'

Answer 7

TextInput имеет это для обработки с помощью

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

например попробуйте вот так

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

Answer 8

Это сработало для меня!

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

      },

Answer 9

Возможно два варианта.

Вариант 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>

Answer 10

Я только что добавил функцию-прототип на основе ответа @mayuresh

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

и используйте это так:

myStr.Capitalize()

Answer 11

Поскольку это очень общая функция, я поместил ее в файл с именем 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 12

Если вы хотите использовать только первую букву ввода:

Answer 13

Да, можно сделать заглавной первую букву текста/строки в 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 style={{fontsize:10,textTransform: 'capitalize'}}>hello world</Text>

Answer 14

если кому-то интересно сделать это просто css/style

<strong style={{textTransform: 'capitalize'}}>{props.alert.type}!

здесь внутренний {} для объекта {textTransform: 'capitalize'}

Answer 15

Этот ответ сработал для меня:

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

Я использовал его с реквизитом в теге alt :

      `${(props.image).slice(0,1).toUpperCase() + (props.image).slice(1, (props.image).length)}`

Тогда я думаю, вы можете применить это к любому тексту, который вы хотите.