ScrollView — 什么是滚动容器及 React Native

什么是 React Native 中的 ScrollView

ScrollView — 是一个 React Native 组件，将其内容包装在可滚动容器中。如果内容超出屏幕边界，用户可以垂直或水平滚动。ScrollView 在挂载时渲染所有子元素，无论它们在屏幕上是否可见。

与仅渲染可见元素（惰性渲染）的 FlatList 不同，ScrollView 立即创建所有原生表示。这使得 ScrollView 适用于表单、设置页面、单个屏幕上的产品卡片 — 任何子元素数量较少（最多 20-30 个）或确切数量未知的情况。

根据 React Native Using ScrollView, 2024，ScrollView 支持嵌套滚动（例如 ScrollView 内部的 ScrollView）、到达边缘时的弹跳效果、滚动指示器、位置锁定（snap）和手势处理。在 iOS 上，ScrollView 通过 contentInsetAdjustmentBehavior 自动在 SafeArea 下方添加间距。

ScrollView 组件的属性和 API

ScrollView 提供了丰富的属性集，用于控制滚动行为、外观和交互性。让我们看看关键组：滚动控制、视觉设置、事件和平台特性。

方向和滚动控制

horizontal — 将滚动方向从垂直（默认）切换为水平。scrollEnabled — 在需要时禁用滚动。showsVerticalScrollIndicator 和 showsHorizontalScrollIndicator 控制滚动指示器的显示。bounces（iOS）在到达内容边缘时启用/禁用弹跳效果。

ScrollView 事件

主要事件 — onScroll，每次滚动时调用，传递包含 nativeEvent 的对象，其中包含 contentOffset（当前位置）、contentSize（内容大小）、layoutMeasurement（可见区域大小）。onMomentumScrollEnd 在惯性滚动完成后调用。onScrollEndDrag — 当用户释放屏幕时。这些事件用于实现无限滚动、视差效果和惰性加载。

通过 ref 进行编程式控制

ScrollView 提供了通过引用进行编程式控制的方法：scrollTo({x, y, animated}) 滚动到指定坐标，scrollToEnd({animated}) — 到内容末尾，flashScrollIndicators() — 临时显示滚动指示器。

const scrollRef = useRef(null);

// 滚动到顶部
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// 滚动到底部
scrollRef.current.scrollToEnd({ animated: true });

滚动的编程式控制常用于聊天（自动滚动到最后一条消息）、表单（滚动到错误字段）和轮播（编程式滚动）。

ScrollView 与 FlatList 的区别

在 ScrollView 和 FlatList 之间选择 — 是 React Native 中关键的架构决策之一。两个组件都提供滚动，但使用根本不同的渲染策略。ScrollView 立即渲染所有内容，FlatList — 仅渲染可见元素。

选择规则：ScrollView — 适用于子元素数量已知且不超过 20-30 的屏幕（用户个人资料、设置表单、产品页面）。FlatList — 适用于元素数量可能很大的列表（新闻源、产品目录、聊天消息）。如果内容多样（标题、表单、卡片、页脚）— ScrollView 更可取，因为 FlatList 期望同类元素。

水平滚动和分页

ScrollView 通过 horizontal 属性支持水平滚动，使其成为轮播、图片库、选项卡和水平列表的理想选择。结合 pagingEnabled（iOS）或 snapToInterval 属性，ScrollView 变为分页导航组件。

水平轮播

horizontal 属性切换滚动方向。pagingEnabled（iOS）启用分页滚动，滚动仅在元素边界处停止。snapToInterval 设置两个平台的吸附步长（以像素为单位）。

const ImageCarousel = ({ images }) => (
    <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={handlePageChange}
    >
        {images.map((img, index) => (
            <Image
                key={index}
                source={{ uri: img }}
                style={{ width: SCREEN_WIDTH, height: 250 }}
            />
        ))}
    </ScrollView>
);

在此轮播中，pagingEnabled 自动将滚动吸附到每个图像的边界。onMomentumScrollEnd 允许更新当前页面指示器。这种轮播原生工作并支持惯性滚动。

位置吸附（Snap）

对于自定义吸附步长，使用 snapToInterval（以像素为单位的步长）和 snapToAlignment（start, center, end）。通过 snapToOffsets 可以设置用于吸附的特定位置数组。这对于具有不同大小卡片的水平列表很有用。

ScrollView 实用示例

我们来看两个典型场景：带表单的屏幕（垂直滚动）和水平类别列表。两者都使用具有不同属性的 ScrollView 以获得最佳行为。

示例 1：带表单的个人资料屏幕

编辑个人资料页面包含多样元素：头像、多个输入字段、开关和保存按钮。ScrollView 允许整个页面整体滚动，而不是每个块单独滚动。

const ProfileScreen = () => (
    <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
    >
        <AvatarPicker />
        <TextInput placeholder="Name" />
        <TextInput placeholder="Email" />
        <TextInput placeholder="About me" multiline />
        <SwitchRow label="Notifications" />
        <Button title="Save" />
    </ScrollView>
);

keyboardShouldPersistTaps: 'handled' 属性允许在键盘打开时滚动和与表单交互。contentContainerStyle 为整个内容应用边距。此模式用于 React Native 中所有带表单的屏幕。

示例 2：水平类别列表

用于在类别（聊天、筛选、选项卡）之间导航的水平 ScrollView 带有标签芯片。这种组件常见于市场和社交网络应用中。

const CategoryChips = ({ categories, selected, onSelect }) => (
    <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.chipContainer}
    >
        {categories.map((cat) => (
            <Chip
                key={cat.id}
                label={cat.name}
                isSelected={selected === cat.id}
                onPress={() => onSelect(cat.id)}
            />
        ))}
    </ScrollView>
);

禁用指示器的水平 ScrollView — 类别栏的标准。每个芯片是具有选择状态的独立组件。showsHorizontalScrollIndicator: false 属性隐藏滚动条，符合移动应用用户的期望。