React Native实现横竖可滚动且首尾列固定的表格方案问询

需求梳理 #

• 表头：首尾项固定、中间可横向滚动，纵向滚动时粘性固定
• 数据行：首尾项固定、中间可横向滚动
• 整体：除表头外支持纵向滚动，各行首尾列同步滚动
• 横向滚动：中间内容同步滚动，首尾列保持固定
• 限制：不使用ref，解决滚动不同步问题

核心实现思路 #

1. 将表格拆分为左固定列、中间滚动列、右固定列三个平行容器，通过Animated.Value共享纵向滚动偏移量，实现三列同步滚动
2. 中间容器嵌套横向ScrollView，单独处理中间列的横向滚动需求
3. 表头通过position: sticky结合滚动偏移监听，实现纵向滚动时的粘性固定，同时保持首尾表头固定、中间表头随横向滚动

完整代码示例 #

import React, { useRef } from 'react';
import { View, ScrollView, Text, Animated, StyleSheet } from 'react-native';

// 模拟表格数据
const tableData = Array.from({ length: 20 }, (_, i) => ({
  id: i + 1,
  leftFixed: `固定左列 ${i + 1}`,
  middle1: `中间列1 ${i + 1}`,
  middle2: `中间列2 ${i + 1}`,
  middle3: `中间列3 ${i + 1}`,
  middle4: `中间列4 ${i + 1}`,
  rightFixed: `固定右列 ${i + 1}`,
}));

const StickyFixedColumnTable = () => {
  // 共享纵向滚动偏移量
  const scrollY = useRef(new Animated.Value(0)).current;

  // 同步滚动偏移到共享变量
  const handleVerticalScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollY } } }],
    { useNativeDriver: false }
  );

  return (
    <View style={styles.container}>
      {/* 左固定列容器 */}
      <Animated.ScrollView
        style={styles.fixedColumn}
        scrollEventThrottle={16}
        onScroll={handleVerticalScroll}
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.headerCell}>
          <Text style={styles.headerText}>固定左表头</Text>
        </View>
        {tableData.map(item => (
          <View key={item.id} style={styles.dataCell}>
            <Text style={styles.dataText}>{item.leftFixed}</Text>
          </View>
        ))}
      </Animated.ScrollView>

      {/* 中间滚动区域容器 */}
      <View style={styles.middleContainer}>
        {/* 中间表头（横向滚动+粘性固定） */}
        <ScrollView
          horizontal
          style={styles.middleHeaderScroll}
          showsHorizontalScrollIndicator={false}
        >
          <View style={[styles.headerCell, styles.middleCell]}>
            <Text style={styles.headerText}>中间表头1</Text>
          </View>
          <View style={[styles.headerCell, styles.middleCell]}>
            <Text style={styles.headerText}>中间表头2</Text>
          </View>
          <View style={[styles.headerCell, styles.middleCell]}>
            <Text style={styles.headerText}>中间表头3</Text>
          </View>
          <View style={[styles.headerCell, styles.middleCell]}>
            <Text style={styles.headerText}>中间表头4</Text>
          </View>
        </ScrollView>

        {/* 中间数据滚动容器 */}
        <Animated.ScrollView
          style={styles.middleDataScroll}
          scrollEventThrottle={16}
          onScroll={handleVerticalScroll}
          showsVerticalScrollIndicator={false}
          scrollTo={{ y: scrollY }}
        >
          {tableData.map(item => (
            <ScrollView
              key={item.id}
              horizontal
              style={styles.middleDataRow}
              showsHorizontalScrollIndicator={false}
            >
              <View style={[styles.dataCell, styles.middleCell]}>
                <Text style={styles.dataText}>{item.middle1}</Text>
              </View>
              <View style={[styles.dataCell, styles.middleCell]}>
                <Text style={styles.dataText}>{item.middle2}</Text>
              </View>
              <View style={[styles.dataCell, styles.middleCell]}>
                <Text style={styles.dataText}>{item.middle3}</Text>
              </View>
              <View style={[styles.dataCell, styles.middleCell]}>
                <Text style={styles.dataText}>{item.middle4}</Text>
              </View>
            </ScrollView>
          ))}
        </Animated.ScrollView>
      </View>

      {/* 右固定列容器 */}
      <Animated.ScrollView
        style={styles.fixedColumn}
        scrollEventThrottle={16}
        onScroll={handleVerticalScroll}
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.headerCell}>
          <Text style={styles.headerText}>固定右表头</Text>
        </View>
        {tableData.map(item => (
          <View key={item.id} style={styles.dataCell}>
            <Text style={styles.dataText}>{item.rightFixed}</Text>
          </View>
        ))}
      </Animated.ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#f5f5f5',
  },
  fixedColumn: {
    width: 120,
  },
  middleContainer: {
    flex: 1,
  },
  middleHeaderScroll: {
    position: 'sticky',
    top: 0,
    zIndex: 10,
    backgroundColor: '#fff',
  },
  middleDataScroll: {
    flex: 1,
  },
  headerCell: {
    padding: 12,
    borderWidth: 1,
    borderColor: '#ddd',
    backgroundColor: '#eaeaea',
  },
  middleCell: {
    minWidth: 150,
  },
  headerText: {
    fontWeight: 'bold',
    fontSize: 14,
  },
  dataCell: {
    padding: 12,
    borderWidth: 1,
    borderColor: '#ddd',
    backgroundColor: '#fff',
  },
  middleDataRow: {
    flex: 1,
  },
  dataText: {
    fontSize: 14,
  },
});

export default StickyFixedColumnTable;

关键细节说明 #

• 纵向滚动同步：通过Animated.Value共享滚动偏移，三个纵向ScrollView的滚动事件都更新该值，中间数据容器通过scrollTo={{ y: scrollY }}绑定偏移，实现无ref的同步滚动
• 表头粘性：中间表头使用position: sticky + top: 0实现纵向固定，左右表头随各自列滚动但因列宽固定，视觉上保持粘性效果；若需更精准控制，可通过scrollY动态计算表头的translateY值
• 横向滚动独立：中间区域的表头和每行数据都用横向ScrollView，横向滚动时仅中间内容移动，左右固定列不受影响
• 性能优化：设置scrollEventThrottle={16}保证滚动事件触发频率与屏幕刷新率一致，避免卡顿

扩展建议 #

• 大量数据场景下，建议用FlatList替代ScrollView，结合onScroll和Animated实现同步滚动，提升性能
• 针对iOS/Android滚动差异，可添加contentInset、contentOffset的适配逻辑
• 复杂多行列头场景，可调整中间表头结构，保持横向滚动和粘性逻辑不变

内容的提问来源于stack exchange，提问作者Sandeep Mishra