Question

我正在尝试在React Native中构建一个评论部分，但我无法正确处理文本溢出和省略号。

结构简单，如下所示：

理想情况下，当用户名足够长时，应该对其进行修剪，并将动作名称一直推到右边，直到达到时间戳，如下所示：

我最接近的是使用此代码：

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>

产生以下结果：

任何有助于找出能够处理这两种情况的独特结构和样式集的帮助都将非常感激。

谢谢！

Answer 1

根据Facebook的guide，

在React Native中，flex的工作方式与在CSS中的工作方式不同。 flex是一个数字而不是一个字符串，它根据https://github.com/facebook/css-layout的css-layout库工作。

当flex为-1时，组件的大小通常根据宽度和高度而定。但是，如果没有足够的空间，组件将缩小到minWidth和minHeight。

所以基本上你需要为你的组件设置正确的flex值。我想你不希望commented和8h缩小。然后，您需要为这些组件将flex值设置为0，以使其不灵活缩小。并将0设置为long long user name，以便在空间不足时灵活缩小。

Answer 2

这将是工作

 <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

当行中有多个Text组件时，React Native处理省略号

2 个答案: