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

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 的指南，

在 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使其在空间不足时灵活收缩。