React Native中的Flexbox可变高度子项

Posted 2021-04-21

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

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

在它们之间，我想要一个全宽，全高的列，其中包含左侧带有图表的内容行，以及带有可变行数的图表右侧的标题（Billing，Budget，Labor）标题下面的数据。这些行有一个左对齐的键（已开票，未开票，总计等）和一个右对齐的值（500.00,250.00,750.00等）。

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

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

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

答案

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

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