React本機處理省略號當一行中的多個文本組件

我想在React Native中構建一個註釋部分，但我在正確處理文本溢出和省略號時遇到問題。React本機處理省略號當一行中的多個文本組件

結構簡單，看起來如下：

理想的情況下，當用戶名是足夠長的時間，應當修剪和動作名稱應該所有的方式，直到達到像時間戳推向右側這樣的：

我就是用這個代碼最接近：

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>

這將產生以下結果：

搞清楚一個獨特的結構和樣式組將處理這兩種情況的任何幫助，將不勝感激。

謝謝！

來源

2016-03-25 fmoga

作爲一個方面說明，我也有一箇中間版本，其中長的用戶名會起作用，但那麼短的一個會被打破，隨時保持「註釋」一路向右。 'author'上沒有'commentTitle'包裝器，'flex：1'和'numberOfLines = {1}'。 – fmoga

根據Facebook的guide，

在本地做出反應柔性不起作用，它確實在CSS中以同樣的方式。 flex是一個數字而不是一個字符串，它的工作原理是根據https://github.com/facebook/css-layout處的css佈局庫。

當flex爲-1時，通常根據寬度和高度來確定組件的大小。但是，如果沒有足夠的空間，組件將縮小到minWidth和minHeight。

所以基本上你需要爲你的組件設置正確的flex值。我想你不想讓commented和8h收縮。然後，您需要將這些組件的flex值設置爲0，以使它們不靈活縮小。並將0設置爲long long user name，以便在空間不足時靈活縮小。

來源

2016-10-11 16:35:34 RandyTek

這會是工作

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

總之，你應該使用的View佈局，而不是Text

來源

2017-03-23 03:26:28

React本機處理省略號當一行中的多個文本組件

回答

相關問題