在视图中对齐内容

Question

我希望有一个视图,其中一个部分(在视​​图中包含三行文本)对齐左侧和部分(图像在视图中)就像这样:

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

我有主视图的样式:

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

但它的作用是什么

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

我已经尝试过align-self和justifyContent来为B进行弹性结束,玩了一下但是我甚至无法完全调整到正确的位置.

(这些标签可能有问题,因为它们在列表视图中？它会影响它们吗？)

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

Answer 1

这对我有用:

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

TextContainer: {
  flex: 1
}

重要的部分是在Tab中提供视图(A,B和空部分)flex: 1以确保它们都具有相同的宽度.在justifyContent: space-between为标签不应该是必要的,但不痛.这应该创建三个相等的部分.

Answer 2

通过向制表符样式添加恒定宽度,我实现了我想要的(有点):

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