我是Flexbox，Exponent和React Native的新手，所以我不确定我是否正确地这样做了 . 我们将非常感谢您提供的任何帮助，我在下面提供了一个可以作为起点的小吃 .
我的屏幕顶部有一个40px高的 Headers ，底部有一个40px高的标签栏 .
在他们之间，我想要一个全宽，全高的列，其中包含左侧图表的内容行，以及图表右侧具有可变行数的 Headers （Billing，Budget，Labor） Headers 下面的数据 . 这些行有一个左对齐的键（已开票，未开票，总计等）和一个右对齐的值（500.00,250.00,750.00等） .
因为数据行数不同（3,4,3等），所以我不想硬编码每个图表行的高度 . 我也不希望这些行拉伸/增长到中心列的高度，但允许它们下面的空白区域 .
我如何构建它以便：1 . 行不填充中心列的高度，但是在顶部对齐并在下面留下空白 . 2.图表在数据旁边左对齐 . 3.数据数字/值（例如，500.00）在其键（例如，已开票）旁边右对齐 .
任何帮助都会很棒 . 如果你能提供snack.expo.io，'d be even better! Here'是我的意思的粗略例子，但是你可以看到行正在伸展到高度（所以's a lot of wasted space and no empty space at the bottom) and the key/values in the data aren'对齐，所以键在左边，值是右对齐.https://snack.expo.io/HknEsZ5uz
1 回答
我更新了几行，这看起来更好吗？ https://snack.expo.io/S1cF5bsdG
flex: 1允许视图填充所有可用空间，因此如果在flex: 1的层次结构的同一级别上有两个视图，则两个视图将平均分割所有垂直空间 . 阅读更多：https://facebook.github.io/react-native/docs/layout-props.html#flex