如何在React Native中基于对象实现简单嵌套列表视图

嘿，这个需求太常见啦！在React Native里实现这种按日期分组的嵌套列表，用SectionList组件是最省心的——它就是专门为这种带分区/分组的列表场景设计的。我给你一步步拆解怎么做：

第一步：先把原始数据按日期分组 #

你的原始用户数组是扁平结构，我们需要先把相同日期的用户归为一组，转换成SectionList需要的格式。可以用数组的reduce方法来快速分组：

// 把扁平的user数组按日期分组
const groupUsersByDate = (users) => {
  return users.reduce((acc, currentUser) => {
    // 先清理lastName里的多余空格（比如你数据里的"Flow "）
    const cleanedUser = {
      ...currentUser,
      lastName: currentUser.lastName.trim()
    };
    const dateKey = cleanedUser.date;
    // 如果当前日期还没作为key存在，就新建一个空数组
    if (!acc[dateKey]) {
      acc[dateKey] = [];
    }
    acc[dateKey].push(cleanedUser);
    return acc;
  }, {});
};

// 再把分组后的对象转换成SectionList需要的sections数组格式
const groupedUsers = groupUsersByDate(user);
const sections = Object.entries(groupedUsers).map(([date, users]) => ({
  title: date, // 分组标题（日期）
  data: users  // 该分组下的用户列表
}));

第二步：用SectionList渲染嵌套列表 #

SectionList自带分组渲染能力，只需要传入处理好的sections，再定义分组头部和列表项的渲染函数就行。下面是完整的组件示例：

import React, { useMemo } from 'react';
import { View, Text, SectionList, StyleSheet } from 'react-native';

const DateGroupedUserList = () => {
  // 你的原始用户数据
  const user = [
    { "firstName": "John", "lastName": "Doe", "date": "19 March 2018" },
    { "firstName": "Anna", "lastName": "Smith", "date": "19 March 2018" },
    { "firstName": "Peter", "lastName": "Jones", "date": "19 March 2018" },
    { "firstName": "Turbulent", "lastName": "Flow ", "date": "20 March 2018" },
    { "firstName": "Anna-subsonic", "lastName": "Raleigh", "date": "20 March 2018" },
    { "firstName": "Jeremiah", "lastName": "Heir", "date": "20 March 2018" }
  ];

  // 用useMemo缓存分组结果，避免每次渲染都重复计算（性能优化）
  const sections = useMemo(() => {
    const grouped = user.reduce((acc, currentUser) => {
      const cleanedUser = {
        ...currentUser,
        lastName: currentUser.lastName.trim()
      };
      const dateKey = cleanedUser.date;
      if (!acc[dateKey]) acc[dateKey] = [];
      acc[dateKey].push(cleanedUser);
      return acc;
    }, {});

    return Object.entries(grouped).map(([date, users]) => ({
      title: date,
      data: users
    }));
  }, [user]);

  // 渲染单个用户项
  const renderUserItem = ({ item }) => (
    <View style={styles.userItem}>
      <Text style={styles.userName}>{`${item.firstName} ${item.lastName}`}</Text>
    </View>
  );

  // 渲染日期分组的头部
  const renderSectionHeader = ({ section }) => (
    <View style={styles.sectionHeader}>
      <Text style={styles.headerText}>{section.title}</Text>
    </View>
  );

  return (
    <SectionList
      sections={sections}
      // 给每个列表项设置唯一key（如果有用户ID的话用ID更稳妥）
      keyExtractor={(item, index) => `${item.firstName}-${index}`}
      renderItem={renderUserItem}
      renderSectionHeader={renderSectionHeader}
      style={styles.container}
    />
  );
};

// 简单的样式区分
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 16,
    paddingVertical: 8
  },
  sectionHeader: {
    backgroundColor: '#f5f5f5',
    padding: 12,
    borderRadius: 4,
    marginVertical: 8
  },
  headerText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333'
  },
  userItem: {
    padding: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  },
  userName: {
    fontSize: 14,
    color: '#555'
  }
});

export default DateGroupedUserList;

几个关键细节说明 #

• 用useMemo缓存分组结果：只有当原始user数组变化时才重新计算分组，避免不必要的性能消耗。
• 清理用户数据：我特意处理了lastName的多余空格，避免显示时出现奇怪的空白。
• keyExtractor：保证每个列表项有唯一标识，避免React渲染警告。
• 样式区分：通过背景色、边框让分组头部和用户项视觉上更清晰，你可以根据自己的需求调整。

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