如何在 React Native 的 FlatList 中添加对齐对齐功能？

React Native 用于为 Android 和 iOS 平台创建应用程序。它允许您为两个平台使用单个代码库。在 React Native 中，FlatList 组件在可滚动列表中显示类似的结构化数据。如果您要呈现大量列表，这是最佳选择。 FlatList 组件仅渲染当前显示在屏幕上的那些元素，而不是全部。当用户向下滚动时，它会呈现列表中的更多元素。它提供了比 ScrollView 更好的性能。

现在，一个简单的 FlatList 组件存在问题。考虑一个场景，您的列表中有 100 个元素，并且您使用了一个简单的 FlatList 组件来呈现列表。在这种情况下，列表可以自由滚动。用户可以随时开始滚动，也可以随时停止滚动。这种类型的 FlatList 没有任何限制。即使当前屏幕显示列表中的两个部分元素，用户也可以停止滚动。您可以查看下面的示例以了解问题。

普通平面列表：

普通平面列表

现在，FlatList 组件提供了一种方法，列表中的元素可以自行对齐屏幕。这样，当用户试图转到下一个元素时，前一个元素将从屏幕中删除，下一个元素将占据屏幕中的整个空间。这种类型的功能在许多著名的应用程序中都实现了。请参阅下面的示例，了解具有对齐对齐功能的 FlatList 如何工作。

具有对齐对齐功能的 FlatList：

具有对齐对齐功能的 FlatList

现在，为了解决这个问题，React Native 为我们提供了一些可以与 FlatList 组件一起使用的 props。

方法：要在您的 React Native 应用程序中添加此功能，您需要将 3 个 props 传递给 FlatList 组件。

1. 对齐对齐
2. 减速率
3. snapToInterval

snapToAlignment：当设置了 snapToInterval 时，snapToAlignment 将定义捕捉到滚动视图的关系。

• start（默认）将对齐左侧（水平）或顶部（垂直）的捕捉
• center 将对齐在中心的捕捉
• end 将在右侧（水平）或底部（垂直）对齐快照

decelerationRate：一个浮点数，用于确定用户抬起手指后滚动视图减速的速度。您也可以使用字符串快捷方式“正常”和“快速”。

snapToInterval：设置后，使滚动视图在 snapToInterval 值的倍数处停止。与 snapToAlignment 和 decelerationRate="fast" 结合使用。

创建应用程序：

第 1 步：打开终端并运行以下命令。它将在您的系统中全局安装 Expo CLI。

npm install -g expo-cli

第 2 步：现在，通过运行以下命令创建一个新的 React Native 项目。

expo init "Your_Project_Name"

第 3 步：现在转到项目文件夹并运行以下命令以启动服务器。

cd "Your_Project_Name"
npm start

第 4 步：您将被要求选择一个模板。选择空白模板。

项目结构：它将如下所示。

项目结构

现在我们将在这种情况下创建 2 个示例。第一个是垂直可滚动的 FlatList，第二个是水平可滚动的 FlatList。我们将创建一个名为 GeeksforGeeks 的自定义组件，我们将在 FlatList 中多次渲染它。

创建一个名为 GeeksforGeeks.js 的新文件：此文件是我们将在 FlatList 中呈现的自定义组件。

GeeksforGeeks 组件

示例 1：在本示例中，我们将在 React Native 中创建一个垂直可滚动的 FlatList。

第 1 步：打开GeeksforGeeks.js文件并在该文件中写入以下代码。它有一个 Text 组件，我们在其中渲染我们在 FlatList 中传递的字符串。文本将显示在屏幕中央。该组件的高度和宽度将与设备的高度和宽度相同，以便它可以占用整个可用空间。除此之外，我们通过样式表为组件提供了一些样式。该组件从 App.js 文件中的 FlatList 接收一个名为 name 的道具，我们将使用该道具在 Text 组件中呈现。

第 2 步：打开App.js文件并在该文件中写入以下代码。

App.js 是运行应用程序时首先呈现的主文件。在这个文件中，我们将创建一个名为 items 的状态。该项目的状态将是一个对象数组。每个对象都有 2 个属性、id 和一个名称。两者都是字符串类型。我们将返回一个具有 FlatList 的 View 组件。此 FlatList 将项目作为数据。然后它将每个对象的名称传递给我们已经创建的自定义组件 GeeksforGeeks。 FlatList 中的每个元素都有一个唯一的 id，以便可以相互区分。现在，我们提供 snapToAlignment 属性，以便 FlatList 从一开始就捕捉每个元素。 decelerationRate 定义捕捉的速度，在这种情况下，我们定义它快。 snapToInterval 定义了捕捉网格的间隔，因为我们正在创建一个垂直滚动的列表，我们将其定义为与屏幕高度相同。

应用程序.js

import { StyleSheet, View, FlatList, Dimensions } from "react-native";
import { useState } from "react";
import GeeksforGeeks from "./GeeksforGeeks";
  
export default function App() {
    const [items, setItems] = useState([
        {
            id: "1",
            name: "GeeksforGeeks View 1",
        },
        {
            id: "2",
            name: "GeeksforGeeks View 2",
        },
        {
            id: "3",
            name: "GeeksforGeeks View 3",
        },
        {
            id: "4",
            name: "GeeksforGeeks View 4",
        },
  ]);
    
    return (
        
             }
                keyExtractor={(item) => item.id}
                snapToAlignment="start"
                decelerationRate={"fast"}
                snapToInterval={Dimensions.get("window").height}
            />
        
  );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：

垂直可滚动的 FlatList

示例 2：在本示例中，我们将在 React Native 中创建水平滚动的 FlatList。

第 1 步：GeeksforGeeks.js文件与上面的示例保持一致。它有一个 Text 组件，我们在其中渲染我们在 FlatList 中传递的字符串。文本将显示在屏幕中央。该组件的高度和宽度将与设备的高度和宽度相同，以便它可以占用整个可用空间。除此之外，我们通过样式表为组件提供了一些样式。该组件从 App.js 文件中的 FlatList 接收一个名为 name 的道具，我们将使用该道具在 Text 组件中呈现。

GeeksforGeeks.js

import { Dimensions, StyleSheet, Text, View } from "react-native";
import React from "react";
  
const GeeksforGeeks = (props) => {
    return (
        
            {props.name}
        
    );
  };
  
export default GeeksforGeeks;
  
const styles = StyleSheet.create({
    container: {
        height: Dimensions.get("window").height,
        width: Dimensions.get("window").width,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#3B5323",
        borderColor: "#000",
        borderWidth: 2,
        alignSelf: "center",
     },
    title: {
        color: "#fff",
        fontSize: 20,
     },
});

第 2 步：打开App.js文件并在该文件中写入以下代码。 App.js 是运行应用程序时首先呈现的主文件。在这个文件中，只会有一个变化，但其余代码与上面的 App.js 文件相同。默认情况下，FlatList 将像上面那样垂直滚动。但是在这个例子中，我们需要它水平滚动。因此，我们在 FlatList 中再提供一个称为 Horizontal 的道具。默认情况下，此道具具有真实值。您也可以手动指定它。有了这个道具，我们的 FlatList 现在可以水平滚动了。  

应用程序.js

import { StyleSheet, View, FlatList, Dimensions } from "react-native";
import { useState } from "react";
import GeeksforGeeks from "./GeeksforGeeks";
  
export default function App() {
    const [items, setItems] = useState([
        {
            id: "1",
            name: "GeeksforGeeks View 1",
        },
        {
            id: "2",
            name: "GeeksforGeeks View 2",
        },
        {
            id: "3",
            name: "GeeksforGeeks View 3",
        },
        {
            id: "4",
            name: "GeeksforGeeks View 4",
        },
  ]);
    
    return (
        
             }
                keyExtractor={(item) => item.id}
                snapToAlignment="start"
                decelerationRate={"fast"}
                snapToInterval={Dimensions.get("window").width}
                horizontal
            />
        
  );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});

输出：

水平可滚动的 FlatList