React Native中FlatList根据Item ID切换粘性头部文本的实现求助

需求说明 #

需要实现FlatList的动态粘性头部：

• 当列表项id为1时，粘性头部显示文本**"A"**
• 当列表项id为2或3时，粘性头部显示文本**"B"**

原代码尝试用stickyHeaderIndices实现固定粘性头部，无法满足动态切换需求，以下是修正方案。

原代码 #

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

const DATA = [
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);
const Render_FlatList_Sticky_header = () => {
  return (
    <>
      <Text>hello</Text>
    </>
  );
};
const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={(item) => item.id}
        stickyHeaderIndices={[0]}
        ListHeaderComponent={Render_FlatList_Sticky_header}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

修正方案 #

核心思路 #

放弃stickyHeaderIndices的固定头部方式，改用FlatList的分组粘性头部特性：通过sections属性传入分组数据，配合renderSectionHeader动态生成对应头部，并开启stickySectionHeadersEnabled启用粘性效果。

修改后的完整代码 #

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

const DATA = [
  { id: '1', title: 'First Item' },
  { id: '1', title: 'First Item' },
  { id: '1', title: 'First Item' },
  { id: '1', title: 'First Item' },
  { id: '1', title: 'First Item' },
  { id: '2', title: 'Second Item' },
  { id: '2', title: 'Second Item' },
  { id: '2', title: 'Second Item' },
  { id: '2', title: 'Second Item' },
  { id: '3', title: 'Third Item' },
  { id: '3', title: 'Third Item' },
  { id: '3', title: 'Third Item' },
  { id: '3', title: 'Third Item' },
  { id: '3', title: 'Third Item' },
  { id: '3', title: 'Third Item' },
  { id: '3', title: 'Third Item' },
];

// 将原始数据按id分组，转换为sections格式
const getSections = () => {
  const groups = {};
  DATA.forEach(item => {
    if (!groups[item.id]) {
      groups[item.id] = [];
    }
    groups[item.id].push(item);
  });
  return Object.entries(groups).map(([id, data]) => ({
    id,
    data,
  }));
};

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

// 动态渲染粘性头部
const renderSectionHeader = ({ section }) => {
  const headerText = section.id === '1' ? 'A' : 'B';
  return (
    <View style={styles.stickyHeader}>
      <Text style={styles.headerText}>{headerText}</Text>
    </View>
  );
};

const App = () => {
  const sections = getSections();
  
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        sections={sections}
        renderItem={({ item }) => <Item title={item.title} />}
        renderSectionHeader={renderSectionHeader}
        keyExtractor={(item) => item.id + Math.random()} // 解决同id项的key冲突
        stickySectionHeadersEnabled={true} // 启用粘性头部
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
  stickyHeader: {
    backgroundColor: '#fff',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  headerText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default App;

关键修改点 #

1. 数据分组：通过getSections函数将原始数据按id分组，转换为FlatList需要的sections结构
2. 动态头部渲染：renderSectionHeader根据section的id判断显示"A"或"B"
3. 启用粘性头部：设置stickySectionHeadersEnabled={true}开启粘性效果
4. 修复key冲突：原数据中同id项较多，通过item.id + Math.random()生成唯一key避免警告

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