React Native中如何在左对齐段落内将日期右对齐？

我希望实现如上图所示的UI，但困惑于如何在React Native的段落末尾将日期对齐到右侧。以下是我目前的尝试代码：

<Text> Long para end <Text style={{textAlign:'center'}}>9:21</Text> </Text>

解决方案 #

方法1：View容器+Flex布局（适配多行段落） #

如果段落是多行文本，用View作为外层容器，通过Flex布局实现文本左对齐、日期靠右侧对齐：

<View style={{
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'flex-end',
  paddingHorizontal: 16
}}>
  <Text style={{flex: 1, marginRight: 8, fontSize: 14}}>
    这里是长段落内容，可能会自动换行，比如Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </Text>
  <Text style={{fontSize: 12, color: '#888'}}>9:21</Text>
</View>

• flexDirection: 'row' 让子元素横向排列
• justifyContent: 'space-between' 强制文本和日期分别靠左右两端
• alignItems: 'flex-end' 保证日期与段落底部对齐
• 文本部分设置flex:1，占满剩余空间，避免日期被段落挤压

方法2：嵌套Text组件+行内Flex（适配单行文本） #

如果是单行短文本，直接在Text组件内嵌套，通过设置行内Flex实现对齐：

<Text style={{
  flex: 1,
  flexDirection: 'row',
  justifyContent: 'space-between',
  paddingHorizontal: 16
}}>
  <Text>Long para end</Text>
  <Text style={{fontSize: 12, color: '#888'}}>9:21</Text>
</Text>

注意：父Text必须设置flexDirection: 'row'，否则嵌套的Text会默认是行内元素，无法实现左右两端对齐。

内容的提问来源于stack exchange，提问作者Azeez