React native 将本机布局与中心元素和底部容器（应随子元素一起增长）进行反应

我的代码库中不断出现一个布局，我无法仅使用react native flex进行适当的样式设置

我想有一个顶部和底部的容器，最初都应该占据一半的屏幕空间。底部容器应与其子容器一起生长，如果需要，顶部容器应收缩

我用这里的代码创建了一个零食，其中布局的行为与它应该的一样，但它通过onLayout使用了一种变通方法：

在web中，通过两个容器上的

flex:1

可以轻松解决相同的问题。在react native中，如果两个表上都有

flexGrow:1

，则它们只分割剩余的空白

---

例如，当前对于显示高度1000，当使用

flexGrow:1

时，如果将200个子容器放置在顶部容器中，顶部容器将获得400，而底部容器将获得400+200。我想要的是两者都得到500，直到底部容器有3个孩子，每个孩子有200个。然后，我希望顶部容器的值为400，底部容器的值为600。

不确定是否有办法通过flex解决这个问题（可能没有）-我也不确定您的要求是什么，但这里有一种方法可以解决这个问题，无需使用

onLayout

，而只需使用

maxHeight

百分比：

实际上，我所做的只是使用您在该零食中的现有计数器值来修改

maxHeight

顶级父级现在的样式如下：

maxHeight:`${Math.min（50，项目高度-计数器*项目高度百分比）}%`

这意味着，在底部父对象已满之前，其最大值将为

50%

，一旦已满，最大高度将逐渐变小（取决于底部视图中的子对象数量）

在我的零食中，我也消除了一些你不必要的观点，不知道它们为什么会出现

下面是现在的情况：

---

这对您有用吗？

正如您在下面所看到的，maxHeight解决方案在实际设备上运行不太好。一些较低的框被裁剪掉或溢出屏幕

虽然解决方案不必只使用flex，但我在底部有一个灵活的容器。它包含文本和不同数量的错误消息。黄色空间将包含空格，绿色容器将包含一些文本输入。在大屏幕上，这不是问题，但对于小型设备，错误消息可能会占用相当大的空间，我无法提前计算下部的大小

---

非常感谢您的建议，但我已经在真实设备上检查过了，它并没有按预期工作，但请参见下文。根据我的经验，在Android上可能存在百分比值问题，但您仍然可以使用屏幕百分比值，如：maxHeight:itemPercentage/totalScreenHeight，即'；这就是我们在生产中所做的，而且效果非常好！我明白了，很高兴知道。如果我事先知道下部的高度，这将非常有效。