当前位置：首页 > article >正文

React Native 全栈开发实战班 - 列表与滚动视图

article 2024/11/14 15:40:33

在移动应用中，列表和滚动视图是非常常见的 UI 组件。React Native 提供了多种组件来处理列表和滚动需求，包括 ScrollView, FlatList, SectionList 等。本小节将详细介绍这些组件的使用方法、优缺点以及适用场景。

2.1 ScrollView

ScrollView 是一个通用的可滚动容器组件，适用于内容较少或内容数量有限的情况。它可以垂直或水平滚动，并且可以嵌套其他组件。

优点：

简单易用，适合快速实现滚动功能。
支持水平和垂直滚动。
可以嵌套其他组件，实现复杂的布局。

缺点：

不适合长列表，因为 ScrollView 会一次性渲染所有子组件，导致性能问题。

常用属性：

contentContainerStyle：定义内容容器的样式。
horizontal：是否水平滚动。
showsVerticalScrollIndicator：是否显示垂直滚动条。
showsHorizontalScrollIndicator：是否显示水平滚动条。
onScroll：滚动事件处理函数。

示例：

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

const ScrollViewExample = () => {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.text}>内容1</Text>
      <Text style={styles.text}>内容2</Text>
      <Text style={styles.text}>内容3</Text>
      <Text style={styles.text}>内容4</Text>
      <Text style={styles.text}>内容5</Text>
      {/* 更多内容 */}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
  text: {
    fontSize: 16,
    marginVertical: 5,
  },
});

export default ScrollViewExample;

水平滚动示例：

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

const HorizontalScrollViewExample = () => {
  return (
    <ScrollView horizontal contentContainerStyle={styles.container}>
      <View style={styles.item}>
        <Text>Item 1</Text>
      </View>
      <View style={styles.item}>
        <Text>Item 2</Text>
      </View>
      <View style={styles.item}>
        <Text>Item 3</Text>
      </View>
      {/* 更多内容 */}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
  item: {
    width: 150,
    height: 100,
    backgroundColor: '#f0f0f0',
    marginRight: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default HorizontalScrollViewExample;

2.2 FlatList

FlatList 是一个高性能的列表组件，适用于渲染长列表数据。它通过虚拟化技术，只渲染当前可见区域的子组件，从而提高性能。

优点：

高性能，适合长列表。
支持懒加载和虚拟化。
支持分页加载。
支持水平滚动。

缺点：

需要数据源为数组形式。
不支持分组列表。

常用属性：

data：列表数据源。
renderItem：定义列表项的渲染函数。
keyExtractor：定义列表项的唯一键。
ListHeaderComponent：定义列表头部组件。
ListFooterComponent：定义列表底部组件。
onEndReached：列表滚动到末尾时触发的函数，用于分页加载。
onEndReachedThreshold：触发 onEndReached 的阈值。

示例：

import React, { useState, useEffect } from 'react';
import { FlatList, Text, View, StyleSheet, ActivityIndicator } from 'react-native';

const FlatListExample = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  const fetchData = async () => {
    setLoading(true);
    const response = await fetch(`https://example.com/api/items?page=${page}`);
    const newData = await response.json();
    setData([...data, ...newData]);
    setPage(page + 1);
    setLoading(false);
  };

  useEffect(() => {
    fetchData();
  }, []);

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

  const renderFooter = () => {
    if (!loading) return null;
    return (
      <View style={styles.footer}>
        <ActivityIndicator size="large" />
      </View>
    );
  };

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      onEndReached={fetchData}
      onEndReachedThreshold={0.5}
      ListFooterComponent={renderFooter}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#ccc',
  },
  footer: {
    padding: 10,
    alignItems: 'center',
  },
});

export default FlatListExample;

2.3 SectionList

SectionList 是一个支持分组列表的组件，适用于需要分组显示的数据。

优点：

支持分组列表。
高性能，适合长列表。
支持懒加载和虚拟化。

缺点：

需要数据源为分组数组形式。

常用属性：

sections：分组数据源。
renderItem：定义列表项的渲染函数。
renderSectionHeader：定义分组头部的渲染函数。
keyExtractor：定义列表项的唯一键。
ListHeaderComponent：定义列表头部组件。
ListFooterComponent：定义列表底部组件。

示例：

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

const SectionListExample = () => {
  const sections = [
    { title: 'A', data: ['Apple', 'Apricot', 'Avocado'] },
    { title: 'B', data: ['Banana', 'Blueberry', 'Blackberry'] },
    { title: 'C', data: ['Cherry', 'Coconut', 'Cranberry'] },
    // 更多分组
  ];

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

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

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

### 导师答疑
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/0fe9d8bca58b4ecbb6921ea6fe47cfab.jpeg)