React Native 中的 ScrollView 组件有什么用？

在本文中，我们将了解 ScrollView 组件的使用。那么首先让我们知道什么是ScrollView？ ScrollView 组件是一个内置的 react-native 组件，用作通用可滚动容器，能够滚动其中的子组件和视图。它提供垂直和水平两个方向的滚动功能。 ScrollView 组件的默认方向是垂直的。为了在水平方向滚动其组件，它使用 props Horizontal: true。必须为 ScrollView 组件提供有界高度，因为它们在有界容器中包含无界高度的子项。

句法：

ScrollView 中的道具：

• StickyHeaderComponent ：此属性用于呈现粘性标题。
• alwaysBounceHorizontal：该属性用于在 ScrollView 到达终点时将其反弹到水平方向。我们必须提供这个道具的价值为真。
• alwaysBounceVertical：该属性用于在ScrollView到达终点时将其弹回垂直方向。我们必须提供这个道具的价值为真。
• automaticAdjustContentInsets ：用于控制 iOS 对滚动视图的内容 inset 的自动调整。
• 反弹：只有当内容大于 ScrollView 和滚动方向轴时，该属性才会在到达内容末尾时反弹 ScrollView。我们必须提供这个道具的价值为真。
• 反弹缩放：此属性将具有动画的最小值和最大值。
• canCancelContentTouches：如果此属性的值为 false，则在跟踪开始时，如果触摸移动，则不会拖动。
• centerContent：如果该属性的值为true且内容小于滚动条，则ScrollView会自动将内容居中。
• contentContainerStyle：用于设置 ScrollView 容器内容的样式
• contentInset：此属性用于将滚动视图内容插入特定数量。
• contentInsetAdjustmentBehavior：该属性用于标识如何使用安全区域插入来修改 ScrollView 的内容区域。
• contentOffset：用于手动设置起始滚动偏移量。
• directionalLockEnabled：如果此属性的值为 true，则只有在拖动时才会有水平或垂直滚动，因为 ScrollView 会尝试锁定它们。
• disableIntervalMomentum：如果此属性的值为 true，则 ScrollView 将在分页期间停止在下一个索引处，可以使用此属性。
• endFillColor：如果滚动视图占用的空间大于其内容填充占用的空间，则可以使用此属性填充滚动视图的其余部分。
• fadingEdgeLength：用于淡出滚动内容的边缘。
• 水平：为了让滚动视图水平滚动，这个道具可以使用 true 作为它的值。
• invertStickyHeaders：这个道具通常与倒置的 ScrollViews 一起使用。
• keyboardDismissMode：这用于了解键盘是否响应拖动而被解除。
• keyboardShouldPersistTaps：这用于确定在敲击后键盘应该保持可见的时间。
• maximumZoomScale：这可用于定义最大缩放大小。
• minimumZoomScale：这可用于定义最小缩放大小。
• nestedScrollEnabled：用于为 Android API 级别 21+ 启用嵌套滚动。
• pagingEnabled：如果该值设置为 true，则滚动视图停止滚动。这可以用于水平分页。
• persistentScrollbar：这个道具阻止滚动条在不使用时变为透明。
• pinchGestureEnabled：如果这个prop的值为true，那么ScrollView将允许使用pinch来放大和缩小。
• refreshControl：用于提供拉动刷新功能。
• s crollEnabled：如果这个prop的值设置为false，那么内容就不会滚动了。
• scrollEventThrottle：用于控制滚动时滚动事件的触发。
• scrollIndicatorInsets：用于确定滚动视图指示器从滚动视图边缘插入的量。
• scrollToOverflowEnabled：如果此属性的值为 true，则滚动视图将滚动超出其内容大小。
• scrollsToTop：如果这个属性的值为 true，那么当点击状态栏时，滚动视图将移动到顶部。
• showsHorizontalScrollIndicator：如果该属性的值为真，那么它将显示一个水平滚动指示器。
• showsVerticalScrollIndicator：如果该属性的值为真，那么它将显示一个垂直滚动指示器。
• snapToAlignment：如果定义了 snapToInterval。 snapToAlignment 用于定义捕捉到滚动视图的关系
• snapToInterval：如果设置了这个属性，那么它会使滚动视图停止在 snapToInterval 值的倍数处。
• snapToOffsets：如果设置了这个属性，那么它会使滚动视图在定义的偏移处停止。
• snapToStart：与 snapToOffsets 结合使用。默认情况下，列表的开头算作捕捉偏移。
• zoomScale：此属性用于设置视图内容的比例。

滚动视图组件的用途：

• Scrolls Child Components : ScrollView 组件是一个容器，用于滚动其中的子组件和视图。
• 渲染所有元素：当我们想要在屏幕上渲染所有子组件（文本、视图、图像等）时，使用 ScrollView 组件。当前甚至在屏幕上不可见的子组件也由 ScrollView 组件渲染。
• 数据大小有限：当我们有一些大小有限的项目时，我们可以使用 ScrollView 组件。 ScrollView 组件最流行的用途是它显示一些有限大小的项目，因为它最适合展示少量有限大小的东西。
• 维护组件状态：滚动视图在组件加载后立即加载所有要显示在屏幕上的数据。因此，整个内容（数据列表）被完全安装，然后呈现数据并维护数据的状态。
• 当我们想要在可滚动容器中呈现通用内容时，可以使用 ScrollView 组件。

现在让我们从实现开始：

第 1 步：打开终端并通过以下命令安装 expo-cli。

npm install -g expo-cli

第2步：现在通过以下命令创建一个项目。

expo init myapp

第 3 步：现在进入您的项目文件夹，即 myapp

cd myapp

项目结构：

女朋友

示例：在以下示例中，我们有一个包含所有示例项目的可滚动列表。

Javascript

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView } from "react-native";
  
class App extends Component {
    state = {
        items: [
            { item: "Item 1", price: "10", id: 1 },
            { item: "Item 2", price: "20", id: 2 },
            { item: "Item 3", price: "30", id: 3 },
            { item: "Item 4", price: "40", id: 4 },
            { item: "Item 5", price: "50", id: 5 },
            { item: "Item 6", price: "60", id: 6 },
            { item: "Item 7", price: "70", id: 7 },
            { item: "Item 8", price: "80", id: 8 },
            { item: "Item 9", price: "90", id: 9 },
            { item: "Item 10", price: "100", id: 10 },
            { item: "Item 11", price: "110", id: 11 },
            { item: "Item 12", price: "120", id: 12 },
            { item: "Item 13", price: "130", id: 13 },
            { item: "Item 14", price: "140", id: 14 },
            { item: "Item 15", price: "150", id: 15 },
        ],
    };
    render() {
        return (
            
                
                    {this.state.items.map((item, index) => (
                        
                            
                                
                                    {item.item} 
                                        ${item.price}
                                
                            
                        
                    ))}
                
            
        )
    }
}
const styles = StyleSheet.create({
    screen: {
        margin: 20,
    },
    text: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: 20,
        padding: 10,
        borderRadius: 10,
        backgroundColor: "green",
  
    },
    amount: {
        color: "#C2185B",
    },
});
export default App;

使用以下命令启动服务器。

npm run android

输出：

示例 2：在本示例中，我们创建了水平方向的 ScrollView 组件。

Javascript

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView } from "react-native";
  
class App extends Component {
    state = {
        items: [
            { item: "Item 1", price: "10", id: 1 },
            { item: "Item 2", price: "20", id: 2 },
            { item: "Item 3", price: "30", id: 3 },
            { item: "Item 4", price: "40", id: 4 },
            { item: "Item 5", price: "50", id: 5 },
            { item: "Item 6", price: "60", id: 6 },
            { item: "Item 7", price: "70", id: 7 },
            { item: "Item 8", price: "80", id: 8 },
            { item: "Item 9", price: "90", id: 9 },
            { item: "Item 10", price: "100", id: 10 },
            { item: "Item 11", price: "110", id: 11 },
            { item: "Item 12", price: "120", id: 12 },
            { item: "Item 13", price: "130", id: 13 },
            { item: "Item 14", price: "140", id: 14 },
            { item: "Item 15", price: "150", id: 15 },
        ],
    };
    render() {
        return (
            
                
                    {this.state.items.map((item, index) => (
                        
                            
                                
                                    {item.item} 
                                        ${item.price}
                                
                            
                        
                    ))}
                
            
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    screen: {
        margin: 20,
    },
    text: {
        marginLeft: 20,
        padding: 10,
        borderRadius: 10,
        backgroundColor: "green",
    },
    amount: {
        color: "red",
    },
});
export default App;

说明：在这个例子中，我们希望组件应该在水平方向上滚动，因此我们为 ScrollView 组件的水平属性赋予“真”值。

输出：

参考： https://reactnative.dev/docs/scrollview