React Native flexbox算法的解决方法 - 不基于文本高度展开的框

Question

我想用React Native实现类似的内容：

...注意灰线必须如何从上到下穿过; “行”的高度取决于该步骤中的文本量。

这就是我所做的：

1. 让我们构建圆形图像节点。您可以在https://rnplay.org/apps/NRZAFg看到此消息。到现在为止还挺好。我用浅红色标记了底层容器（我称之为lhsContainer）。容器弯曲以填满整行。



1. 好的，让我们尝试确保灰线弯曲以填充lhsContainer的顶部和底部。简单：我只需将height: 100添加到包含它的视图（styles.container）。这很好用：



1. 接下来，合并文本。我希望文本给出行的高度（因此lhsContainer）。这不能正常工作。灰线不会弯曲到容器的底部！ ：



Autolayout在这里做了正确的事（成为一个花哨的约束解算器），但FlexBox没有。 （您可以通过取消注释the playground app中的代码来自行查看。

我相信使用row-reverse是解决此问题的一种方法，但遗憾的是React Native doesn't support it yet。

这是什么解决方法？