时间戳

首页 > 解决方案 > 如何在 RN 中的视图末尾放置 2 个文本组件？

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

问题描述

我想达到这个结果

在此处输入图像描述

但这是当前的行为

在此处输入图像描述

您可以注意到两个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-nativereact-native-androidreact-native-iosreact-native-component

解决方案

我认为如果您将两个文本都包装在另一个<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>

推荐阅读