证明视图中的内容

Question

我想要一个视图，其中一部分（视图中包含三行文本）左对齐，一部分（视图中包含图像）右对齐，如下所示：

+-----------+
|   |   |   |
| A |   | B |
|   |   |   |
+-----------+

我有主视图的样式：

Tab: {
  flexDirection: 'row',
  flex: 1,
  justifyContent: 'space-between',
  backgroundColor: '#F5FCFF',
  padding:5,
  borderWidth:1,
}

但它的作用是

+-----------+
|   ||   |  |
| A || B |  | 
|   ||   |  |
+-----------+

我已经尝试过 align-self 和 justifyContent 来为 B 进行 flex-end，尝试了一下但我什至无法让整个东西对齐到正确的位置。

（也许这些选项卡有问题，因为它们在列表视图中？这会影响它们吗？）

问题是：我应该如何让组件监听对齐和对齐属性？

Answer 1

我通过向选项卡样式添加恒定宽度实现了我想要的（某种程度上）：

Tab: {
  flexDirection: 'row',
  flex: 1,
  width:200,
  justifyContent: 'space-between',
  backgroundColor: '#F5FCFF',
  padding:5,    
  borderWidth:1,
}

Answer 2

这对我有用：

Tab: {
  flexDirection: 'row'
  ...
  justifyContent: 'space-between'
}

TextContainer: {
  flex: 1
}

重要的是将选项卡内的视图（A、B 和空白部分）全部 flex: 1 以确保它们都具有相同的宽度。 Tab 的 justifyContent: space-between 应该不是必需的，但不会造成伤害。这应该创建三个相等的部分。

证明视图中的内容

Justifying content in a View

react-native