React Native中的Flexbox可变高度子项

Question

我是Flexbox，Exponent和React Native的新手，所以我不确定我是否正确地执行此操作。我们将非常感谢您提供的任何帮助，并且我已经提供了以下可以作为起点的小吃。

我的屏幕顶部有一个40px高的标题，底部有40px高的标签栏。

在他们之间，我希望有一个全宽，全高的列，其中包含左侧图表的内容行，以及图表右侧的标题（结算，预算，人工）在标题下面有可变数量的数据行。这些行具有左对齐（已开票，未开票，总计等）的键以及右对齐的值（500.00,250.00,750.00等）。

由于数据行数不同（3,4,3等），我不想硬编码每个图表行的高度。我也不希望这些行拉伸/增长到中心列的高度，但允许它们下面的空白区域。

我如何构建它以便： 1.行不会填充中心列的高度，但是在顶部对齐并在下面留下空白。 2.图表在数据旁边左对齐。 3.数据数字/值（例如，500.00）在其键（例如，已开票）旁边右对齐。

任何帮助都会很棒。如果你能提供snack.expo.io，那就更好了！这是我的意思的一个粗略的例子，但你可以看到行延伸到高度（因此有很多浪费的空间，底部没有空的空间）和键/值数据没有对齐，所以键位于左侧，值是右对齐的。 https://snack.expo.io/HknEsZ5uz

Answer 1

我更新了几行，这看起来更好吗？ https://snack.expo.io/S1cF5bsdG

flex: 1允许视图填充所有可用空间，因此如果在flex: 1的层次结构的同一级别上有两个视图，则两个视图将平均分割所有垂直空间。阅读更多：https://facebook.github.io/react-native/docs/layout-props.html#flex