Layout 当一行中有多个文本组件时，响应本机处理省略号

我正在尝试在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>

const styles=StyleSheet.create({
评论行：{
填充：10
},
评论行：{
flexDirection:'行'，
对齐项目：“中心”
},
评论标题：{
弹性：1
},
作者：{
重量：'500'
},
评论机构：{
paddingTop:5，
垫底：5
}
});
用户名
评论
8h
评论体

这将产生以下结果：

如果您能帮助我们设计出一套独特的结构和风格来处理这两种情况，我们将不胜感激

谢谢

根据Facebook的

在React中，原生flex的工作方式与CSS中的工作方式不同。flex是一个数字而不是字符串，它根据位于的css布局库工作

当flex为-1时，组件通常根据宽度和高度调整大小。但是，如果没有足够的空间，组件将收缩到其最小宽度和最小高度

因此，基本上您需要为组件设置正确的

flex

值。我想您不希望

注释

和

8h

收缩。然后，您需要将这些组件的

flex

值设置为

0

，以使它们不易收缩。并将

0

设置为

long-long-user-name

，使其在空间不足时能够灵活收缩。

这将是可行的

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

用户名
评论
8h
评论体

---

总之，你应该使用

视图

来布局，而不是

文本

作为旁注，我也有一个中间版本，其中长用户名可以使用，但短用户名被破坏，始终将“注释”固定在右侧。这没有

commentTitle

包装器，

flex:1

和

numberOfLines={1}

设置在

author

上。请将

长用户名

值改为

-1

？