如何在 RN 中的视图末尾放置 2 个文本组件？

【问题标题】：How to position 2 text components at the end of a view in RN?如何在 RN 中的视图末尾放置 2 个文本组件？
【发布时间】：2020-02-18 13:37:03
【问题描述】：

我想达到这个结果

但这是当前的行为

您可以注意到两个 Text 组件没有正确对齐。

这是代码

<View style={{ flexDirection: 'row', marginRight: 7, borderWidth: 2 }}>
     <Text style={{ color: '#0022FF', fontWeight: 'bold', fontSize: 20, alignSelf: 'flex-end', marginRight: 5 }}>2.6</Text>
     <Text style={{ color: '#0022FF', fontSize: 9, alignSelf: 'flex-end' }}>Bar</Text>
</View>

你们能帮我解决这个问题吗？

【问题讨论】：

标签： react-native react-native-android react-native-ios react-native-component

【解决方案1】：

我认为如果您将两个文本都包装在另一个 <Text> 组件中，它应该可以工作，如下所示：

<View style={{ flexDirection: 'row', marginRight: 7, borderWidth: 2 }}>
  <Text>
     <Text style={{ color: '#0022FF', fontWeight: 'bold', fontSize: 20, alignSelf: 'flex-end', marginRight: 5 }}>2.6</Text>
     <Text style={{ color: '#0022FF', fontSize: 9, alignSelf: 'flex-end' }}>Bar</Text>
  </Text>
</View>

【讨论】：

它工作正常，但文本组件之间的空间不再工作（marginRight: 5 被忽略）。你有什么想法吗？
尝试改用paddingRight
我试过了，但什么也没发生，我现在像这样 {" "} 使用了一些额外的空间，或者我可能要在Text 组件之间嵌套另一个空的View。谢谢你的精彩回答