Reaguj na wielokropka obsługi wielokrotnej, gdy wiele komponentów tekstu z rzędu

Question

Próbuję utworzyć sekcję komentarzy w React Native, ale mam problemy z prawidłowym przepełnieniem tekstu i wielokropkiem.

Konstrukcja jest prosta i wygląda następująco:

Najlepiej, gdy nazwa jest wystarczająco długi powinny być przycięte i nazwa działania powinien być wsunięty w prawo, aż osiągnie znacznik czasu jak to:

najbliżej mam używał ten kod:

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> 

co daje następujące wyniki:

Każda pomoc w zastanawianie się unikalną strukturę i styl zestaw, który będzie obsługiwać zarówno przypadki, byłoby bardzo mile widziane.

Dzięki!

Answer 1

Według Facebooka guide,

In React Native Flex nie działają w ten sam sposób, w jaki to robi w CSS. flex jest liczbą, a nie łańcuchem i działa zgodnie z biblioteką układów css pod numerem https://github.com/facebook/css-layout.

Gdy flex wynosi -1, komponent ma zwykle rozmiar i szerokość. Jeśli jednak nie ma wystarczającej ilości miejsca, komponent skurczy się do wartości minimalnej i minimalnej.

W zasadzie należy ustawić poprawne wartości flex dla swoich komponentów. Przypuszczam, że nie chcesz, aby zmniejszyły się wartości commented i . Następnie należy ustawić wartości flex na 0 dla tych komponentów, aby stały się nieelastyczne, aby się skurczyć. I ustaw 0 na long long user name, aby uczynić ją elastyczną do zmniejszania, gdy przestrzeń nie jest wystarczająca.

Answer 2

To będzie praca

<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> 

Jednym słowem, należy użyć View do układu, nie Text