我编写了一个简单的 react-native 消息传递应用程序,其中包含 2 个文本元素的消息气球:消息文本和消息时间。消息文本可以是多行的,并且时间文本具有固定宽度。但是,我遇到了无法将时间文本元素安排在与消息文本的最后一行相同级别的问题。
我的目标是获得一个行为类似于易于执行的 HTML 示例的组件,但我不知道如何在 RN 的 flex-box 模型中实现此类。
.container {
width: 300px;
background-color: #ff0000;
border-radius: 10px;
padding: 10px;
}
.time {
width: 50px;
text-align: right;
background-color: #00ff00;
display: inline-block;
float: right;
}
.separator {
height: 10px;
}
.clear{
clear: both;
}
<p>when the bottom line of message is not long enough that time can be fit into the same line</p>
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida tristique arcu, malesuada dignissim dui porttitor id. Praesent id posuere tortor. </span>
<span class="time">12:37</span>
<div class="clear"></div>
</div>
<div class='separator'></div>
<p>when the bottom line of message takes more space, the time text takes additional line at bottom</p>
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida tristique arcu, malesuada dignissim dui porttitor id. </span>
<span class="time">12:37</span>
<div class="clear"></div>
</div>
任何帮助,将不胜感激。