react native中的水平和垂直滚动布局

Question

我正在尝试在 React Native 中配置可以水平和垂直滚动的表格网格布局。

表格网格布局是指类似于 html table/tr/td 的布局：同一行中的所有视图应具有相同的高度，同一列中的所有视图应具有相同的宽度。

应根据行中最大视图的高度选择行高。 列的宽度应根据列中最大视图的宽度来选择。

我从水平滚动开始。 这就是我所做的： https://snack.expo.io/@grekonstudio/01_initial 虽然我在浏览器中看起来不错，但在我的设备上看起来是这样的：

最大的列占用它需要的空间，其余的空间在其他列之间共享。但它是为每一行独立完成的，所以列的边框是浮动的。理想情况下，我希望第 1 行第 1 行和第 2 行第 1 行与第 3 行第 1 行的大小相同。这在不同行中不起作用。

嗯，显而易见的想法是切换到列基础布局，对： https://snack.expo.io/@grekonstudio/04_column_based 同样，在浏览器中，它看起来不同。在设备上看起来是这样的：

乍一看，这正是我想要的！但显然，它只是将问题转移到另一个维度。让我们让一个 View 高于其他 View，添加一个垂直的 ScrollView，我们现在失去了行布局： https://snack.expo.io/@grekonstudio/05_same_problem

您可以看到更大的单元格占用了所有空间，并且行的大小不再相同:(

此外，我还尝试了两件事：

• 将 flex: 1 设置为 Scroll 的视图 contentContainerStyle。 https://snack.expo.io/@grekonstudio/02_flex_1 在这种情况下，它根本不滚动。

获取设备高度和宽度并固定滚动视图 contentContainerStyle 的大小 https://snack.expo.io/@grekonstudio/03_fixed_width 在这种情况下，'flex: 1' 可以在没有滚动视图的情况下正常工作：将其拆分为相等大小的框，而我希望通过内容调整行和列 另一个缺点是硬编码宽度：2 * screenWigth 例如对于小内容，我可能不需要 2 个屏幕宽度，我可能只需要 1.5 或 1.2。它也不适用于肖像画。

我也尝试过使用 DataTable 组件 https://callstack.github.io/react-native-paper/data-table.html，但是当添加到水平滚动视图时，它无法保持与我的第一张图像相同的表格布局：同一列中的单元格具有不同的宽度。< /p>

有没有人有解决上述问题的方法？