Est-il possible de capitaliser la première lettre du texte/chaîne de réagir natif? Comment faire?

J'ai de capitaliser la première lettre du texte que je veux afficher. J'ai cherché, mais je ne peux pas trouver clair chose à faire, aussi il n'y a pas de tels accessoires pour text à réagir natif de la documentation officielle.

Je suis en train de montrer mon texte avec le format suivant:

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

ou

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

Comment puis-je le faire?

Suggestions sont les bienvenues?

InformationsquelleAutor mayuresh patil | 2018-01-22
  1. 29

    Écrire une fonction comme ceci

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

    ensuite appeler à partir d' <Text> balise Par le passage du texte en paramètre

    <Text>{this.Capitalize(this.state.title)} </Text>
    • Comment peut-elle possible à l'aide de la feuille de style,
    • Comment à propos de chaque mot dans le texte d'entrée?
    • utilisation textTransform: 'capitalize'. Voir ma réponse: stackoverflow.com/a/58867901/7869175
    InformationsquelleAutor mayuresh patil
  2. 16

    Au lieu d'utiliser une fonction, d'une façon plus propre est d'écrire cela comme une composante commune.

    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;

    Où que vous soyez à l'aide de <Text>, le remplacer par <CapitalizedText>

    InformationsquelleAutor Adam Kipnis
  3. 10

    Vous pouvez également utiliser le text-transform propriété css dans le style:

    <Text style={{textTransform: 'capitalize'}}>{this.state.title}</Text>
    • Je ne sais pas à propos de Linux, mais je peux confirmer que fonctionne sur Windows 10.
    • Cela ne fonctionne que pour les bas de casse du texte. (1) Si vous avez un "bonjour", ce qui permettra de transformer le texte en "Bonjour". (2) Si vous voulez "Bonjour" comme un résultat, vous pouvez utiliser "heLLo".toLowerCase() avec textTransform: 'capitalize' css.
    InformationsquelleAutor tmsss
  4. 3

    suffit d'utiliser javascript.

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

    • Je l'ai utilisé mais je dois l'écrire pour chaque text tag que j'ai utilisées. puis-je appeler une fonction dans text balise par le passage de paramètre, comme ce texte et tous les autres textes peuvent être de capitaliser à l'aide de cette fonction.
    • je pense que tu veux dire <Text>{autoCapitalize(text)}</Texte>. Bien sûr, vous pouvez le faire
    • <Text>{this.autoCapitalize(text)}</Text> c'est écrire
    • Je suis sur d'erreur sur votre suggestion aussi.
    • quelle erreur pouvez-vous élaborer?
    • Il donne une erreur que autpCapitalize(texte) n'est pas une fonction

    InformationsquelleAutor akshay
  5. 2

    TextInput ont cette poignée à l'aide de

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

    par exemple, essayez comme ceci

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

    Car c'est très de la fonctionnalité générale je l'ai mis dans un fichier appelé strings.js sous ma bibliothèque:

    //lib/strings.js

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

    Et il suffit d'importer dans les composants qui en ont besoin:

    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>

}
    InformationsquelleAutor Attaque
  7. 0

    Réagir natif permet désormais de rendre le texte en majuscules directement avec textTransform: 'capitalize'. Pas de fonction nécessaire.

    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'
 }
})
    InformationsquelleAutor Fernando Rojo
  8. 0

    J'ai juste ajouté une fonction prototype, basé sur @mayuresh réponse

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

    et de l'utiliser comme ceci:

    myStr.Capitalize()
    InformationsquelleAutor Yinon_90