Wie zu vermeiden, eine ganze Textkomponente in die nächste Zeile in FlexWrap: 'wrap'

Question

Nehmen wir ein Beispiel. Ich habe zwei Textkomponenten wie folgt:

<View style={{flexWrap: 'wrap'}}> 
    <Text>12345</Text> 
    <Text>67890</Text> 
</View> 

Mein erwartete Ergebnis ist: (Der zweite Textkomponente wird gesplittet und zog in die nächste Zeile)

12345678 
90 

Das tatsächliche Ergebnis ist : (die ganze zweite Textkomponente wird Bewegung in der nächsten Zeile, wenn die Linie genügend Breite hat nicht die ganze Textkomponente für die Umsetzung.)

12345 
67890 

Wie kann ich den Code ändern? Danke vielmals !!

Answer 1

React native unterstützt verschachtelte Text Components, was bedeutet, dass Sie auf verschiedene Strings verweisen können, um das gewünschte Ergebnis zu erhalten. Ich bin mir nicht sicher, warum Sie das tun, obwohl: P Einige Beispielcode ist unten. Beachten Sie, dass die Verwendung von flexWrap nicht erforderlich ist.

<View style = {{width: 50, backgroundColor: '#e0e0e0'}}> 
     <Text>1234578 
      <Text>9123456</Text> 
     </Text> 
</View> 

Mit der Ausgabe von unten ...

hoffe, das hilft!

EDIT # 1: Eine andere mögliche Lösung?

<View style = {{width: 50, backgroundColor: '#e0e0e0'}}> 
     <Text> 
      {123456789} 
      {412346789} 
     </Text> 
</View>