Reagiere nativen Text, der von meinem Bildschirm geht und weigert sich zu wickeln. Was ist zu tun?

Dies ist ein bekannter Fehler . flexWrap: 'wrap' hat für mich nicht funktioniert, aber diese Lösung scheint für die meisten Leute zu funktionieren

Code

<View style={styles.container}>
    <Text>Some text</Text>
</View>

Styles

export default StyleSheet.create({
    container: {
        width: 0,
        flexGrow: 1,
        flex: 1,
    }
});

Es funktioniert, wenn Sie flexDirection: row von descriptionContainerVer bzw. descriptionContainerVer2 entfernen.

UPDATE (siehe Kommentare)

Ich habe ein paar Änderungen vorgenommen, um das zu erreichen, von dem ich denke, dass Sie danach streben. Zuerst habe ich die descriptionContainerHor-Komponente entfernt. Dann habe ich die flexDirection der vertikalen Ansichten auf row gesetzt und alignItems: 'center' und justifyContent: 'center' hinzugefügt. Da die vertikalen Ansichten nun tatsächlich entlang der horizontalen Achse gestapelt sind, habe ich den Ver-Teil aus dem Namen entfernt.

Jetzt haben Sie eine Wrapper-Ansicht, die den Inhalt vertikal und horizontal ausrichten und entlang der x-Achse stapeln soll. Dann füge ich einfach zwei unsichtbare View-Komponenten auf der linken und rechten Seite der Text-Komponente ein, um die Auffüllung durchzuführen.

So was: 

<View style={styles.descriptionContainer}>
  <View style={styles.padding}/>
    <Text style={styles.descriptionText} numberOfLines={5} >
      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 style={styles.padding}/>
</View>

Und das:

descriptionContainer:{
  flex:0.5, //height (according to its parent),
  flexDirection: 'row',
  backgroundColor: 'blue',
  alignItems: 'center',
  justifyContent: 'center',
  // alignSelf: 'center',
},
padding: {
  flex: 0.1
},
descriptionText: {
  backgroundColor: 'green',//Colors.transparentColor,
  fontSize: 16,
  flex: 0.8,
  color: 'white',
  textAlign: 'center',
  flexWrap: 'wrap'
},

Dann bekommst du, was ich glaube, dass du danach warst.

WEITERE VERBESSERUNGEN

Wenn Sie nun mehrere Textbereiche innerhalb der blauen und orangefarbenen Ansicht stapeln möchten, können Sie Folgendes tun:

<View style={styles.descriptionContainer2}>
  <View style={styles.padding}/>
  <View style={styles.textWrap}>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Some other long text which you can still do nothing about.. Off the screen we go then.
    </Text>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Another column of text.
    </Text>
  </View>
  <View style={styles.padding}/>
</View>

Wo textWrap so aussieht:

textWrap: {
  flexDirection: 'column',
  flex: 0.8
},

Hoffe das hilft!

sie benötigen lediglich einen Wrapper für Ihren <Text> mit flex wie unten beschrieben.

<View style={{ flex: 1 }}>
  <Text>Your Text</Text>
</View>

Eine andere Lösung, die ich für dieses Problem gefunden habe, ist das Einbetten des Textes in eine Ansicht. Stellen Sie auch den Stil der Ansicht auf Flex ein: 1.

Die Lösung für dieses Problem ist flexShrink: 1.

<View
    style={{ flexDirection: 'row' }}
> 
   <Text style={{ flexShrink: 1 }}>
       Really really long text...
   </Text>
</View>

Abhängig von Ihrer Einrichtung müssen Sie möglicherweise auch flexShrink: 1 zum übergeordneten Element von <View> hinzufügen, damit dies funktioniert. Spielen Sie also damit, und Sie werden es schaffen.

Die Lösung wurde von Adam Pietrasiak in diesem Thread. entdeckt

Dies hat in den meisten Fällen auch bei flexiblen Säulen funktioniert:

wordWrap: 'break-Word'

Auf diese Weise wird der Text auch mit einer fest codierten Breite auf dasselbe Element/dieselbe Komponente umgebrochen.

width: 100

In Ihrem Fall:

width: '80%'

In meinem Fall war dies entscheidend, um 3 Spalten beizubehalten und trotzdem Text zu lesen.

Hoffe das hilft!

Ich wollte hinzufügen, dass ich das gleiche Problem hatte und FlexWrap, Flex: 1 (in den Textkomponenten), nichts Flex funktionierte für mich.

Schließlich stellte ich die Breite des Wrappers meiner Textkomponenten auf die Breite des Geräts ein, und der Text wurde umbrochen. const win = Dimensions.get('window');

      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignSelf: 'center',
        width: win.width
      }}>
        <Text style={{ top: 0, alignSelf: 'center' }} >{image.title}</Text>
        <Text style={{ alignSelf: 'center' }}>{image.description}</Text>
      </View>