React Native中如何固定横向FlatList的第一列？

stickyHeaderIndices属性目前仅支持纵向FlatList，横向模式下不会生效，你可以通过双视图并行的方式手动实现固定第一列的效果：

核心思路 #

拆分数据为「固定列数据」和「滚动列数据」，用一个固定宽度的视图展示第一列，旁边搭配横向滚动的FlatList展示剩余列；若行高不固定，可同步两者的滚动位置保证对齐。

代码示例 #

1. 基础固定列（行高固定场景）

import React from 'react';
import { View, Text, FlatList } from 'react-native';

export default class FixedFirstColumn extends React.Component {
  state = {
    data: [
      { id: 1, firstCol: '行1', cols: ['列1-1', '列1-2', '列1-3', '列1-4'] },
      { id: 2, firstCol: '行2', cols: ['列2-1', '列2-2', '列2-3', '列2-4'] },
      { id: 3, firstCol: '行3', cols: ['列3-1', '列3-2', '列3-3', '列3-4'] },
    ]
  };

  render() {
    const { data } = this.state;
    return (
      <View style={{ flexDirection: 'row' }}>
        {/* 固定第一列 */}
        <View style={{ width: 120 }}>
          {data.map(item => (
            <View 
              key={item.id} 
              style={{ 
                height: 60, 
                justifyContent: 'center', 
                alignItems: 'center', 
                borderWidth: 1, 
                borderColor: '#eee' 
              }}
            >
              <Text>{item.firstCol}</Text>
            </View>
          ))}
        </View>

        {/* 横向滚动的剩余列 */}
        <FlatList
          data={data}
          renderItem={({ item }) => (
            <View style={{ flexDirection: 'row', height: 60 }}>
              {item.cols.map((col, idx) => (
                <View 
                  key={idx} 
                  style={{ 
                    width: 120, 
                    justifyContent: 'center', 
                    alignItems: 'center', 
                    borderWidth: 1, 
                    borderColor: '#eee' 
                  }}
                >
                  <Text>{col}</Text>
                </View>
              ))}
            </View>
          )}
          keyExtractor={item => item.id.toString()}
          horizontal
          showsHorizontalScrollIndicator={false}
        />
      </View>
    );
  }
}

2. 滚动同步（行高动态场景）

如果行高不固定，需要给固定列添加ScrollView并同步滚动位置：

import React from 'react';
import { View, Text, FlatList, ScrollView } from 'react-native';

export default class FixedFirstColumn extends React.Component {
  state = {
    data: [
      { id: 1, firstCol: '行1（高）', cols: ['列1-1', '列1-2', '列1-3'], height: 80 },
      { id: 2, firstCol: '行2', cols: ['列2-1', '列2-2'], height: 60 },
      { id: 3, firstCol: '行3（更高）', cols: ['列3-1'], height: 100 },
    ]
  };

  fixedColumnRef = React.createRef();

  handleScroll = (event) => {
    this.fixedColumnRef.current?.scrollTo({
      y: event.nativeEvent.contentOffset.y,
      animated: false
    });
  };

  render() {
    const { data } = this.state;
    return (
      <View style={{ flexDirection: 'row' }}>
        {/* 带滚动的固定第一列 */}
        <ScrollView 
          ref={this.fixedColumnRef} 
          style={{ width: 120 }}
          showsVerticalScrollIndicator={false}
        >
          {data.map(item => (
            <View 
              key={item.id} 
              style={{ 
                height: item.height, 
                justifyContent: 'center', 
                alignItems: 'center', 
                borderWidth: 1, 
                borderColor: '#eee' 
              }}
            >
              <Text>{item.firstCol}</Text>
            </View>
          ))}
        </ScrollView>

        {/* 横向滚动的剩余列，同步滚动 */}
        <FlatList
          data={data}
          renderItem={({ item }) => (
            <View style={{ flexDirection: 'row', height: item.height }}>
              {item.cols.map((col, idx) => (
                <View 
                  key={idx} 
                  style={{ 
                    width: 120, 
                    justifyContent: 'center', 
                    alignItems: 'center', 
                    borderWidth: 1, 
                    borderColor: '#eee' 
                  }}
                >
                  <Text>{col}</Text>
                </View>
              ))}
            </View>
          )}
          keyExtractor={item => item.id.toString()}
          horizontal
          showsHorizontalScrollIndicator={false}
          onScroll={this.handleScroll}
          scrollEventThrottle={16} // 保证滚动同步的流畅度
        />
      </View>
    );
  }
}

注意事项 #

• 确保固定列和滚动列的行高一致，避免视觉错位
• 滚动同步时，scrollEventThrottle设置为16（对应60fps）可以提升流畅度

内容的提问来源于stack exchange，提问作者Mayur Vaghasiya