使用React Native模拟内联块

时间:2016-06-03 16:23:28

标签: css3 react-native flexbox

有没有人知道如何模拟显示:使用React Native的内联块?

基本上我想在创建的样式中添加一个display:inline-block。

示例:

enter image description here

我的目的是避免上面的“3天前”在前面的消息太长时分成2行。

谢谢!

[编辑] 所以这是我的React Native代码:

<View style={styles.contentContainer}>
    <Text>
        <Text style={styles.content}>{notification.content}</Text>
        <Text style={styles.created}>   {moment(notification.created, "YYYY-MM-DD[T]hh:mm:ss").subtract(n, 'hours').fromNow()}</Text>
    </Text>
</View>

这里是相应的CSS对应:

contentContainer: {
    flex: 1,
},
content: {
    textAlign: 'left',
    fontSize: 14,
},
created: {
    textAlign: 'left',
    fontSize: 10,
    color: '#777777',
},

1 个答案:

答案 0 :(得分:1)

主要更改是将flexWrap: 'nowrap'添加到created样式。

工作示例:https://rnplay.org/apps/RgpZ5w