2
votes

React Native - Problème de transformation de texte avec Android Simulator

Y a-t-il un problème connu avec TextTransform: «majuscule» avec Android?

Je suis assez nouveau dans React natif et je viens de terminer la création de vues, toutes avaient l'air bien dans Ios mais sur Android - aucun bouton ne s'affiche. Après une série d'essais et d'erreurs, j'ai trouvé que le problème semble être textTransform: 'uppercase', si je supprime ceci de la feuille de style, le texte s'affiche correctement.

Quelqu'un a-t-il rencontré cela? Je ne trouve aucune information sur le bogue sur le Web.

Voici mon code:

btnText:{
color:'#fff',
marginRight:14,
marginLeft:10,
fontSize:20,
alignSelf: 'center',
marginTop:-3,
textTransform:'uppercase',
},

avec le style:

return (
  <View style={AppStyles.buttonRect} >

    <View style={AppStyles.buttonRectWrap}>

      <Image style={AppStyles.buttonRectIcon} source={this.props.buttonIcon} />

      <Text style={AppStyles.btnText}>{this.props.buttonTxt}</Text>
    </View >
  </View>
);

qui se traduit par -

entrez la description de l'image ici

Si je supprime la ligne de transformation:

 entrez la description de l'image ici

J'ai essayé plusieurs simulateurs et j'obtiens la même erreur.


2 commentaires

Il semble que ce soit un bogue connu: github.com/facebook/react-native/issues / 21966


cela explique - si vous voulez ajouter comme réponse i; je vous coche @ChrisStillwell. à votre santé


4 Réponses :


2
votes

Il s'agit actuellement d'un bogue avec React Native. Un correctif semble être dans la version 0.59.0, car les candidats à la version 0.59.0 ne contiennent pas le bogue. Source: https://github.com/facebook/react-native/issues/21966 < / a>


0 commentaires


1
votes

Je suis confronté au même problème avec la version 0.58.5 native de react, cela semble être un bogue bien connu. Essayez d'utiliser JS normal pour mettre en majuscule les chaînes pour le moment:

capitalizeString = (text: string) => typeof text === 'string' && text.length> 0 && $ {text [0] .toUpperCase ()} $ {text.slice (1)}

capitalizeString ('mystring')

ou simplement: string.toUpperCase ();

ref: https://github.com/facebook/react-native/issues / 21966


0 commentaires

0
votes

La solution de contournement que j'ai trouvée à ce problème était de créer un composant qui restitue les props.children et d'enchaîner la méthode .toUpperCase.

react-native text-transform en majuscules


0 commentaires