React Native 中如何渲染列表？

推荐答案

在 React Native 中，渲染列表通常使用 FlatList 或 SectionList 组件。FlatList 适用于渲染一维的、可滚动的列表，而 SectionList 则适用于渲染带有分组的列表。

使用 FlatList 渲染列表

// www.javascriptcn.com code example
import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

const data = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
  // 更多数据...
];

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

const App = () => (
  <FlatList
    data={data}
    renderItem={renderItem}
    keyExtractor={item => item.id}
  />
);

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

使用 SectionList 渲染分组列表

// www.javascriptcn.com code example
import React from 'react';
import { SectionList, Text, View, StyleSheet } from 'react-native';

const sections = [
  {
    title: 'Section 1',
    data: ['Item 1', 'Item 2', 'Item 3'],
  },
  {
    title: 'Section 2',
    data: ['Item 4', 'Item 5', 'Item 6'],
  },
  // 更多分组...
];

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

const renderSectionHeader = ({ section }) => (
  <Text style={styles.sectionHeader}>{section.title}</Text>
);

const App = () => (
  <SectionList
    sections={sections}
    renderItem={renderItem}
    renderSectionHeader={renderSectionHeader}
    keyExtractor={(item, index) => item + index}
  />
);

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
  sectionHeader: {
    fontSize: 24,
    backgroundColor: '#fff',
    padding: 10,
  },
});

export default App;

本题详细解读

FlatList 和 SectionList 的区别

• FlatList: 适用于渲染一维的、可滚动的列表。它只会渲染当前可见的列表项，因此性能较好，适合处理大量数据。
• SectionList: 适用于渲染带有分组的列表。每个分组可以有自己的标题和数据项，适合需要分组的场景。

关键属性

• data: 列表的数据源，通常是一个数组。
• renderItem: 用于渲染每个列表项的函数。
• keyExtractor: 用于为每个列表项生成唯一的 key。
• sections (仅 SectionList): 分组列表的数据源，通常是一个包含 title 和 data 属性的对象数组。
• renderSectionHeader (仅 SectionList): 用于渲染每个分组的标题。

性能优化

• FlatList 的 initialNumToRender: 控制首次渲染的列表项数量，避免一次性渲染过多项导致性能问题。
• FlatList 的 windowSize: 控制渲染窗口的大小，默认值为 21，表示渲染当前可见项及其前后各 10 项。

其他注意事项

• keyExtractor: 确保每个列表项都有唯一的 key，避免渲染时出现问题。
• onEndReached: 可以用于实现无限滚动，当用户滚动到列表底部时触发。

通过合理使用 FlatList 和 SectionList，可以在 React Native 中高效地渲染列表数据。