0

我编写了一个简单的 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>

任何帮助,将不胜感激。

4

1 回答 1

0

这可能不是您要寻找的答案,但如果您刚开始,我建议您使用 UI 组件库,例如 Nativebase,这是一种很好的做法,您肯定不想从头开始构建所有东西。它们有很多你可以利用的组件,并且有很多关于如何实现它们的例子。您还应该查看材料设计 - https://material.io/

于 2019-08-16T20:02:03.917 回答