Создайте собственный ScrollView с помощью FlatList

Мы собираемся создать собственный ScrollView с помощью FlatList в React Native

ScrollView — это компонент React Native, который позволяет прокручивать содержимое в одном направлении, вертикально или горизонтально. Он может содержать один или несколько дочерних элементов и часто используется для прокрутки небольшого количества контента.

FlatList, с другой стороны, является более оптимизированной версией ScrollView для больших списков данных. Он отображает только те элементы, которые в данный момент видны на экране, что делает его более эффективным для прокрутки больших наборов данных. Он также поддерживает расширенные функции, такие как обновление по запросу, поддержка верхнего и нижнего колонтитула и прокрутка до индекса.

Таким образом, ScrollView хорош для прокрутки небольшого количества контента, а FlatList лучше подходит для больших списков данных, с улучшенной производительностью и дополнительными функциями.

Создайте собственный вид прокрутки

• Код на TypeScript

import React from "react";
import { 
    FlatList, 
    RefreshControlProps, 
    ScrollView, 
    StyleProp, 
    ViewStyle 
} from "react-native";

interface ScrollViewProps {
    ref?: any;
    children: React.ReactNode;
    horizontal?: boolean;
    useScrollView?: boolean;
    nestedScrollEnabled?: boolean;
    showsVerticalScrollIndicator?: boolean;
    showsHorizontalScrollIndicator?: boolean;
    initialNumToRender?: number;
    refreshControl?: React.ReactElement<RefreshControlProps>;
    keyboardDismissMode?: "none" | "interactive" | "on-drag";
    keyboardShouldPersistTaps?: "always" | "never" | "handled";
    contentContainerStyle?: StyleProp<ViewStyle>;
}

const AppScrollView = (props: ScrollViewProps) => {
    return (
        <>
            {
                //
                props?.useScrollView ? (
                    <ScrollView
                        ref={props?.ref}
                        contentContainerStyle={props?.contentContainerStyle}
                        nestedScrollEnabled={props?.nestedScrollEnabled || true}
                        horizontal={props?.horizontal ? props.horizontal : false}
                        keyboardDismissMode={props?.keyboardDismissMode || "on-drag"}
                        keyboardShouldPersistTaps={props?.keyboardShouldPersistTaps || "always"}
                        refreshControl={props?.refreshControl ? props.refreshControl : undefined}
                        showsVerticalScrollIndicator={props?.showsVerticalScrollIndicator || false}
                        showsHorizontalScrollIndicator={props?.showsHorizontalScrollIndicator || false}>
                        {props.children}
                    </ScrollView>
                ) : (
                    <FlatList
                        key={"key0"}
                        data={[]}
                        renderItem={null}
                        ListEmptyComponent={null}
                        initialNumToRender={props?.initialNumToRender}
                        contentContainerStyle={props?.contentContainerStyle}
                        nestedScrollEnabled={props?.nestedScrollEnabled || true}
                        keyboardDismissMode={props?.keyboardDismissMode || "on-drag"}
                        keyboardShouldPersistTaps={props?.keyboardShouldPersistTaps || "always"}
                        horizontal={props?.horizontal ? props.horizontal : false}
                        refreshControl={props?.refreshControl ? props.refreshControl : undefined}
                        showsVerticalScrollIndicator={props?.showsVerticalScrollIndicator || false}
                        showsHorizontalScrollIndicator={props?.showsHorizontalScrollIndicator || false}
                        keyExtractor={(item) => item}
                        ListHeaderComponent={() => <React.Fragment>{props.children}</React.Fragment>}
                    />
                )
            }
        </>
    );
};

export default AppScrollView;

• Код на JavaScript

import React from "react";
import { FlatList, ScrollView } from "react-native";

const AppScrollView = (props) => {
    return (
        <>
            {
                //
                props?.useScrollView ? (
                    <ScrollView
                        ref={props?.ref}
                        contentContainerStyle={props?.contentContainerStyle}
                        nestedScrollEnabled={props?.nestedScrollEnabled || true}
                        horizontal={props?.horizontal ? props.horizontal : false}
                        keyboardDismissMode={props?.keyboardDismissMode || "on-drag"}
                        keyboardShouldPersistTaps={props?.keyboardShouldPersistTaps || "always"}
                        refreshControl={props?.refreshControl ? props.refreshControl : undefined}
                        showsVerticalScrollIndicator={props?.showsVerticalScrollIndicator || false}
                        showsHorizontalScrollIndicator={props?.showsHorizontalScrollIndicator || false}>
                        {props.children}
                    </ScrollView>
                ) : (
                    <FlatList
                        key={"key0"}
                        data={[]}
                        renderItem={null}
                        ListEmptyComponent={null}
                        initialNumToRender={props?.initialNumToRender}
                        contentContainerStyle={props?.contentContainerStyle}
                        nestedScrollEnabled={props?.nestedScrollEnabled || true}
                        keyboardDismissMode={props?.keyboardDismissMode || "on-drag"}
                        keyboardShouldPersistTaps={props?.keyboardShouldPersistTaps || "always"}
                        horizontal={props?.horizontal ? props.horizontal : false}
                        refreshControl={props?.refreshControl ? props.refreshControl : undefined}
                        showsVerticalScrollIndicator={props?.showsVerticalScrollIndicator || false}
                        showsHorizontalScrollIndicator={props?.showsHorizontalScrollIndicator || false}
                        keyExtractor={(item) => item}
                        ListHeaderComponent={() => <React.Fragment>{props.children}</React.Fragment>}
                    />
                )
            }
        </>
    );
};

export default AppScrollView;

Вышеупомянутый компонент имеет функциональные возможности как ScrollView, так и FlatList ScrollView. ScrollView — это компонент пользовательского интерфейса в React Native, который позволяет прокручивать его содержимое, а FlatList — это специализированный ScrollView, который используется для рендеринга списка элементов. Итак, компонент может выполнять задачи обоих этих компонентов, позволяя прокручивать контент, будь то простой список или что-то более сложное.

Подробнее о ScrollView и FlatList:

Прокрутка:

• Может использоваться для прокрутки содержимого в одном направлении (вертикально или горизонтально).
• Может содержать несколько дочерних элементов, но только один прямой дочерний элемент.
• Контент всегда рисуется как одно изображение, что может привести к проблемам с производительностью для больших объемов контента.
• Не поддерживает эффективную обработку больших списков, так как отображает все дочерние элементы одновременно.

Плоский список:

• Может использоваться для эффективной прокрутки больших объемов данных.
• Отрисовывает только те элементы, которые в данный момент видны на экране, повышая производительность.
• Поддерживает такие функции, как обновление по запросу, верхний и нижний колонтитулы и прокрутка до индекса.
• Под капотом используется VirtualizedList, который использует ленивую загрузку и отображает только те элементы, которые видны в данный момент, что делает его более эффективным с точки зрения использования памяти.
• Может использоваться с реквизитом initialNumToRender, чтобы указать количество элементов для рендеринга до того, как они потребуются.

В заключение, ScrollView хорош для прокрутки небольших объемов контента, а FlatList лучше подходит для прокрутки больших объемов данных. Если вы создаете приложение со списком элементов, вам следует использовать FlatList, так как он предлагает лучшую производительность и дополнительные функции по сравнению с ScrollView.