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

Question

我想达到这个结果

但这是当前的行为

您可以注意到两个 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>

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

Answer 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>

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

How to position 2 text components at the end of a view in RN?

react-native

react-native-android

react-native-ios

react-native-component