在react-native中如何创建具有垂直和水平滚动的表格视图

Question

在react-native中，我必须创建一个表视图，它应满足以下条件：

1. 第一行应该是标题，其中第一个和最后一个项目应该是粘性的，并且中心的项目可以水平滚动，此外，标题应该是粘性的以进行垂直滚动。
2. 从第二行开始，我们将获得实际数据，其中第一个和最后一个项目应该是粘性的，并且中心的项目可以水平滚动。
3. 除了标题表之外，它应该可以垂直滚动，包括每行的第一个和最后一个项目，而且当垂直滚动时，它应该看起来像整个行一起滚动。
4. 此外，当用户水平滚动时，带有标题的所有项目应一起滚动，并且每行的第一个和最后一个项目应保持在其位置。

我可以实现所有功能，但表格可以垂直滚动或水平滚动。

我不想使用 ref 因为使用 ref 滚动不同步。下面我分享了一段视频，展示了它目前的工作原理。唯一的问题是水平滚动不同步。

React-Native 中的滚动表

Answer 1

滚动视图：

外部水平 ScrollView 允许整个表格在超过屏幕宽度时水平滚动。 内部垂直 ScrollView（或 FlatList）用于垂直滚动行。 渲染表格：

首先渲染标题（headers）。 然后，我们使用一个FlatList来渲染数据行（data）。它映射数据并为 data 中的每个项目呈现一行。 造型：

表格单元格使用边框设计，以创建类似表格的外观。您可以调整内边距、边框和其他样式属性以匹配您的设计。 flexDirection: 'row' 确保每行水平布局。 水平滚动：

带有水平属性的外部 ScrollView 允许水平滚动整个表格。如果表格的宽度超过可用的屏幕宽度，则会触发此操作。 垂直滚动：

内部ScrollView或FlatList允许垂直滚动行。 要点： 此方法使用 FlatList 和 ScrollView 来实现具有水平和垂直滚动的所需表格布局。 您可以使用动态数据、分页或更复杂的交互进一步自定义表格。 这将创建一个响应式表格，您可以在其中水平滚动（以查看更多列）和垂直滚动（以查看更多行）。