web-dev-qa-db-ger.com

Ist es möglich, den ersten Buchstaben des Textes/der Zeichenfolge in reaktiver Sprache zu verwenden? Wie es geht?

Ich muss den ersten Buchstaben des Textes groß darstellen, den ich anzeigen möchte. Ich habe danach gesucht, aber ich habe keine klare Sache gefunden, um das zu tun, es gibt auch keine Requisiten für text in der offiziellen Dokumentation von Reactor.

Ich zeige meinen Text in folgendem Format:

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

oder

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

Wie kann ich es tun?

Vorschläge sind willkommen 

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

Schreiben Sie eine Funktion wie diese

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

dann rufen Sie es vom <Text>-Tag auf, indem Sie Text als Parameter übergeben

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

Anstatt eine Funktion zu verwenden, ist es eine sauberere Methode, diese als allgemeine Komponente zu schreiben.

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;

Wo immer Sie <Text> verwenden, ersetzen Sie es durch <CapitalizedText>.

10
Adam Kipnis

benutze einfach Javascript.

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

3
akshay

TextInput muss dies mit behandeln

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

Zum Beispiel so versuchen 

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

Sie können die text-transform css -Eigenschaft auch im Stil verwenden:

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

Da dies eine sehr allgemeine Funktionalität ist, habe ich sie in eine Datei namens strings.js unter meiner Bibliothek:

// lib/strings.js

export const CapitalizeFirstLetter = (str) => {
  return str.length ? str.charAt(0).toUpperCase() + str.slice(1) : str
}

Und importieren Sie es einfach in die Komponenten, die es benötigen:

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