css - React Native 中的 Flexbox 可变高度子项

Question

我是 Flexbox、Exponent 和 React Native 的新手，所以我不确定我这样做是否正确。如果您能提供任何帮助，我们将不胜感激，我在下面提供了一份小吃，可以作为起点。

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

在它们之间，我想要一个全宽、全高的列，其中包含内容行和左侧的图表，以及图表右侧的标题(计费、预算、人工)和变量标题下的数据行数。这些行有一个左对齐的键(Invoiced、Not Invoiced、Total 等)和一个右对齐的值(500.00、250.00、750.00 等)。

因为数据的行数各不相同(3、4、3 等)，所以我不想对每个图表行的高度进行硬编码。我也不希望这些行拉伸(stretch)/增长到中心列的高度，但允许在它们下面留出空白)。

我如何构建它以便:1. 行不填充中心列的高度，而是在顶部对齐并在下方留空白。2. 图表在其数据旁边左对齐。3. 数据数字/值(例如 500.00)在其键(例如 Invoiced)旁边右对齐。

任何帮助都会很棒。如果你能提供一个 snack.expo.io，那就更好了!这是我的意思的一个粗略示例，但是您可以看到行正在拉伸(stretch)到高度(因此有很多空间浪费并且底部没有空白空间)并且数据中的键/值不合理所以键在左边，值是右对齐的。 https://snack.expo.io/HknEsZ5uz

Answer 1

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

flex: 1 允许一个 View 填充所有可用空间，因此如果您在具有 flex: 1 的层次结构的同一级别上有两个 View ，两个 View 都会拆分所有垂直空间均等。阅读更多:https://facebook.github.io/react-native/docs/layout-props.html#flex