React Native Behandlung von Auslassungspunkten, wenn mehrere Textkomponenten in einer Zeile

Question

Ich versuche, einen Kommentarabschnitt in React Native zu erstellen, aber ich habe Probleme, Textüberlauf und Ellipsen richtig zu behandeln.

Die Struktur ist einfach und sieht wie folgt aus:

Idealfall, wenn der Benutzername lang genug ist, es beschnitten werden soll, und der Aktionsname den ganzen Weg nach rechts geschoben werden soll, bis sie den Zeitstempel erreicht wie dies:

Der nächstgelegene ich bekam, war mit diesem Code:

const styles = StyleSheet.create({ 
    commentRow: { 
     padding: 10 
    }, 
    commentTopRow: { 
     flexDirection: 'row', 
     alignItems: 'center' 
    }, 
    commentTitle: { 
     flex: 1 
    }, 
    author: { 
     fontWeight: '500' 
    }, 
    commentBody: { 
     paddingTop: 5, 
     paddingBottom: 5 
    } 
}); 

<View style={styles.commentRow}> 
    <View style={styles.commentTopRow}> 
     <Text style={styles.commentTitle} numberOfLines={1}> 
      <Text style={styles.author}>User Name</Text> 
      <Text style={styles.action}> commented</Text> 
     </Text> 
     <Text style={styles.timestamp}>8h</Text> 
    </View> 
    <Text style={styles.commentBody}>comment body</Text> 
</View> 

, die folgenden Ergebnisse erzielt:

Jede Hilfe herauszufinden, eine einzigartige Struktur und Stil, die beide Fälle behandelt würde sehr geschätzt.

Danke!

Answer 1

Nach guide der Facebook,

In Reaktion india flex nicht die gleiche Art und Weise funktioniert, dass es in CSS tut. flex ist eine Zahl und keine Zeichenfolge und funktioniert gemäß der CSS-Layout-Bibliothek unter https://github.com/facebook/css-layout.

Wenn flex -1 ist, wird die Komponente normalerweise nach Breite und Höhe bemessen. Wenn jedoch nicht genügend Platz vorhanden ist, wird die Komponente auf die Mindestbreite und die Mindesthöhe verkleinert.

Also im Grunde müssen Sie die richtigen flex Werte für Ihre Komponenten einstellen. Ich nehme an, Sie wollen nicht commented und 8h schrumpfen. Dann müssen Sie die Werte flex für diese Komponenten auf 0 setzen, um sie unflexibel zu machen. Und setzen Sie 0 auf long long user name, um es flexibel zu verkleinern, wenn der Platz nicht ausreicht.

Answer 2

sein Dieses gonna Arbeit

<View style={styles.commentRow}> 
    <View style={styles.commentTopRow}> 
     <View style={styles.commentTitle}> 
      <Text numberOfLines={1}> 
       <Text style={styles.author}>User Name</Text> 
       <Text style={styles.action}> commented</Text> 
      </Text> 
     </View> 
     <View> 
      <Text style={styles.timestamp}>8h</Text> 
     </View> 
    </View> 
    <Text style={styles.commentBody}>comment body</Text> 
</View> 

Mit einem Wort, sollten Sie die View zu Layout verwenden, nicht die Text