Comment empêcher le texte natif de React de déborder et obtenir un texte centré dans une largeur spécifique ?

Problème de troncature de texte natif de React : une solution complète

Le problème décrit dans l'invite survient lorsque le texte d'un élément React Native s'étend au-delà de son limites prévues, ce qui le fait déborder de l'écran. Pour résoudre ce problème et conserver une disposition de texte centrée dans une largeur spécifiée, par exemple 80 % de son élément parent, nous devons exploiter les capacités de flexbox.

Le code fourni dans l'invite introduit plusieurs éléments React Native. imbriqués les uns dans les autres, avec des styles spécifiques appliqués à chacun. L'élément de texte en question, défini avec numberOfLines={5}, restreint le nombre de lignes affichées à l'écran. Cependant, cela ne parvient pas à empêcher le texte de dépasser la largeur souhaitée.

La solution consiste à modifier la propriété flex de la vue parent qui contient l'élément de texte et à ajuster son paramètre flexWrap. En définissant flexWrap sur « wrap », nous permettons à l'élément de texte de s'enrouler sur plusieurs lignes, l'empêchant de déborder de l'écran. De plus, nous définissons flexShrink sur « 1 » pour garantir que l'élément de texte se rétrécit lorsque sa vue parent dispose d'un espace limité.

Voici le code mis à jour :

<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start', backgroundColor: 'grey'}}>
  <View style={{flex: 0.5, flexDirection: 'column', alignItems: 'center', backgroundColor: 'blue'}}>
    <View style={{flex: 0.3, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap', flexShrink: 1}}>
      <Text style={{backgroundColor: 'green', fontSize: 16, color: 'white', textAlign: 'center', flexWrap: 'wrap'}}>
        Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
      </Text>
    </View>
  </View>
  <View style={{flex: 0.5, flexDirection: 'column', alignItems: 'center', backgroundColor: 'orange'}}>
    <View style={{flex: 0.3, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap', flexShrink: 1}}>
      <Text style={{backgroundColor: 'green', fontSize: 16, color: 'white', textAlign: 'center', flexWrap: 'wrap'}}>
        Some other long text which you can still do nothing about.. Off the screen we go then.
      </Text>
    </View>
  </View>
</View>

Avec ces modifications, le texte restera confiné dans la largeur spécifiée tout en s'enroulant sur plusieurs lignes pour s'adapter à l'espace disponible. Cette approche s'adapte dynamiquement à différentes tailles d'écran tout en conservant la disposition du texte souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!