Reagieren Native - Styling Fix Text Überschneidungen mit Taste auf der gleichen Linie

Question

ich mit den richtigen Arten habe Schwierigkeiten zu vermeiden, zwischen einem langen Text zu vermeiden, überlappen, die innerhalb einer Zeile oder zeigen Auslassungszeichen und einige andere Tasten, die auch zeigen sollte bis enthalten sollte in derselben Zeile in der App. Das Problem kann

https://snack.expo.io/Bk449wmAe

Unten in der unten Skizze auf Expo zu sehen ist der Code für die Komponente

<View style={{flexDirection: 'row', marginTop: 50}}> 
    <View style={{flex: 1, 
     flexDirection: 'row', 
     alignItems: 'center', 
     marginVertical: 5}}> 
     <Text style={{marginHorizontal: 5, overflow: 'hidden'}} numberOfLines={1}>{'Varun Gupta Varun Gupta Varun Gupta Varun Gupta'}</Text> 
     <Text style={{fontSize: 10, fontStyle: 'italic'}}>{'Creator'}</Text> 
    </View> 
    <TouchableOpacity style={{alignSelf: 'center', padding: 5}}> 
     <Text>{'Call'}</Text> 
    </TouchableOpacity> 
    <TouchableOpacity style={{alignSelf: 'center', padding: 5}}> 
     <Text>{'Message'}</Text> 
    </TouchableOpacity> 
</View> 

Wenn Sie die App laden, würden Sie diesen Namen bemerken überlappt die Call und Message Tasten, die es nicht sollte. Ich möchte, dass der Creator Text mit dem Namen und den Call und Message Schaltflächen auf der rechten Seite angezeigt wird. Für z.B. wenn Sie den Namen nur Varun Gupta zu reduzieren waren, scheint es, als mit dem Creator Text Ankleben mit dem Namen erwartet und die Call und Message auf dem rechten Seite erscheinen. Wenn der Name zu lang ist, um in eine Zeile zu passen, dann möchte ich zeigen, wie viel in eine Zeile passen würde, gefolgt von der Creator Zeichenfolge gefolgt von den zwei Schaltflächen. Ich habe verschiedene Kombinationen im Styling ohne Erfolg ausprobiert. Ich bin nicht sicher, warum der Text in die Knöpfe überlaufen sollte, die in derselben Zeile vorhanden sind. Wenn ich die Elemente in den Inspector inspizierte, scheint es, dass die View den Namen enthält, und der Creator Text richtig bemessen, aber die Text Komponente den Namen enthält, außerhalb der Grenzen geht und ich bin nicht sicher, wie es zu beheben.

Wenn ich flex: 1 zum <Text style={{marginHorizontal: 5, overflow: 'hidden'}} numberOfLines={1}>{'Varun Gupta Varun Gupta Varun Gupta Varun Gupta'}</Text> hinzufügen, es die Breite behebt aber dann, wenn der Name nur Varun Gupta ist, Creator String klebt nicht mit dem Namen, sondern erscheint auf der rechten Seite von der erwartet wird, aber nicht erwünscht.

Bitte helfen Sie mit dem Styling.

Answer 1

können Sie lodash/truncate verwenden ein Auslassungszeichen am Ende des Namens hinzuzufügen:

const name = _.truncate('Some really long name that should be truncated', { separator: ' ', length: 25 }) 

dann ...

<Text style={{marginHorizontal: 5, overflow: 'hidden'}} numberOfLines={1}>{name}></Text> 

https://snack.expo.io/r1W-6omCg