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'
  ...
  justifyContent: 'space-between'
}

TextContainer: {
  flex: 1
}

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

Answer 2

我通过为标签样式添加恒定宽度实现了我想要的（种类）：

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

在视图中对齐内容

2 个答案: