Phản hồi dấu ba chấm xử lý Gốc khi nhiều thành phần Văn bản trong một hàng

Question

Tôi đang cố gắng tạo một phần nhận xét trong Phản hồi Gốc nhưng tôi gặp sự cố khi xử lý tràn văn bản và dấu ba chấm chính xác.

Cấu trúc đơn giản và trông như sau:

Một cách lý tưởng, khi tên người dùng là đủ lâu nó nên được tỉa và tên hành động cần được đẩy tất cả các con đường bên phải cho đến khi nó đạt đến dấu thời gian như này:

gần nhất tôi đã được sử dụng mã này:

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> 

trong đó sản lượng kết quả như sau:

Bất kỳ giúp đỡ trong việc tìm ra một cấu trúc và phong cách độc đáo bộ mà sẽ xử lý cả hai trường hợp sẽ được đánh giá rất nhiều.

Cảm ơn!

Answer 1

Theo Facebook guide,

Trong Phản ứng flex Native không làm việc cùng một cách mà nó trong CSS. flex là một số chứ không phải là một chuỗi, và nó hoạt động theo thư viện bố trí css tại https://github.com/facebook/css-layout.

Khi flex bằng -1, thành phần thường có kích thước theo chiều rộng và chiều cao. Tuy nhiên, nếu không có đủ không gian, thành phần sẽ co lại thành minWidth và minHeight của nó.

Vì vậy, về cơ bản bạn cần đặt đúng giá trị flex cho các thành phần của mình. Tôi cho rằng bạn không muốn commented và 8h để thu nhỏ. Sau đó, bạn cần đặt giá trị flex thành 0 cho các thành phần này để làm cho chúng không bị co lại. Và đặt 0 thành long long user name để giảm độ co giãn khi không gian đủ.

Answer 2

sẽ Đây là công việc

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

Trong một từ, bạn nên sử dụng Các View để bố trí, không phải là Text