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
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>
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>
.
benutze einfach Javascript.
text.slice(0,1).toUpperCase() + text.slice(1, text.length)
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'
/>
Sie können die text-transform
css -Eigenschaft auch im Stil verwenden:
<Text style={{textTransform: 'capitalize'}}>{this.state.title}</Text>
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>
}