layout - 当连续多个文本组件时，React Native 处理省略号

Question

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

结构很简单，如下所示:


理想情况下，当用户名足够长时，它应该被修剪，并且 Action 名称应该一直向右推，直到它到达这样的时间戳:



我得到的最接近的是使用此代码:

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 ,

In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the css-layout library at https://github.com/facebook/css-layout.

When flex is -1, the component is normally sized according width and height. However, if there's not enough space, the component will shrink to its minWidth and minHeight.

所以基本上你需要设置正确的 flex组件的值。我想你不想要 commented和 8h收缩。然后，您需要设置 flex值为 0对于这些组件，使它们不灵活地收缩。并设置 0至 long long user name使其在空间不足时灵活收缩。