web-dev-qa-db-ja.com

反応ネイティブでテキスト/文字列の最初の文字を大文字にすることは可能ですか？どうやるか？

表示するテキストの最初の文字を大文字にする必要があります。私はそれを検索しましたが、私はそれを行うための明確なことを見つけることができませんでした。また、textに対応するネイティブの公式ドキュメントにはそのような小道具はありません。

次の形式でテキストを表示しています。

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

または

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

どうすればいいですか？

提案は大歓迎ですか？

react-nativetextreact-native-androidreact-native-text
19
mayuresh patil

このような関数を書く

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

次に、テキストをパラメーターとして渡すことにより、<Text>タグから呼び出します

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

関数を使用する代わりに、よりクリーンな方法は、これを共通コンポーネントとして記述することです。

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>に置き換えてください

14
Adam Kipnis

text-transform cssプロパティをスタイルで使用することもできます：

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

javaScriptを使用してください。

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

3
akshay

TextInputはこれを使用して処理します

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

たとえば、このようにしてみてください

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

これは非常に一般的な機能であるため、ライブラリの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>

}
0
Attaque