نحوه بارگذاری دینامیک داده ها با صفحه بندی سفارشی در React Native

صفحه بندی سفارشی با بارگذاری داده پویا می تواند عملکرد و تجربه کاربری کلی برنامه شما را بهبود بخشد.

صفحه بندی به سیستم تقسیم حجم زیادی از داده ها به صفحات یا صفحات کوچکتر و قابل مدیریت تر برای بهبود عملکرد و قابلیت استفاده اشاره دارد. صفحه بندی سفارشی، اگر به درستی اجرا شود، می تواند تجربه کاربری بهتری را ارائه دهد. یاد بگیرید که چگونه یک راه حل صفحه بندی سفارشی در React Native ایجاد کنید که به شما امکان می دهد داده ها را به صورت پویا بارگیری کنید.

درک صفحه بندی سفارشی

با صفحه‌بندی سفارشی، توسعه‌دهندگان می‌توانند مکانیزم صفحه‌بندی را ایجاد کنند که متناسب با نیازهای خاص برنامه‌شان باشد. صفحه‌بندی سفارشی می‌تواند شامل طراحی یک رابط کاربری منحصر به فرد برای پیمایش بین صفحات، پیاده‌سازی الگوریتم‌هایی برای واکشی داده‌ها از پایگاه داده یا API، یا ترکیب ویژگی‌هایی مانند پیمایش بی‌نهایت یا بارگذاری تنبل باشد.

مزایای صفحه بندی سفارشی

ایجاد یک سیستم صفحه بندی سفارشی برای برنامه های تلفن همراه React Native می تواند مزایایی را ارائه دهد:

• می‌تواند مقیاس‌پذیری برنامه شما را بهبود بخشد و به آن اجازه می‌دهد تا حجم بیشتری از داده‌ها را کارآمدتر مدیریت کند. این به ویژه برای برنامه هایی که با مجموعه داده های بزرگ سروکار دارند بسیار مهم است.
• صفحه بندی سفارشی می تواند عملکرد برنامه شما را با تقسیم داده ها به قطعات کوچکتر و قابل مدیریت تر بهبود بخشد. این باعث کاهش زمان بارگذاری می شود.
• با صفحه بندی سفارشی، انعطاف پذیری و کنترل بیشتری در ارائه و دسترسی به داده ها در برنامه خود خواهید داشت.

پیاده سازی بارگذاری پویا با صفحه بندی سفارشی

هنگامی که برنامه React Native شما فقط داده های لازم برای بارگیری را در آن زمان بارگیری می کند، به آن بارگذاری پویا گفته می شود. برای پیاده سازی بارگذاری پویا با صفحه بندی سفارشی، می توانید این مراحل کلی را دنبال کنید:

1. روش صفحه بندی را تعیین کنید: روش صفحه بندی را انتخاب کنید که برای محتوای شما بهترین کار را دارد. این می‌تواند یک سیستم صفحه‌بندی سنتی مبتنی بر صفحه باشد، که در آن کاربران برای بارگیری صفحه بعدی کلیک می‌کنند، یا یک سیستم اسکرول بی‌نهایت، که در آن با پیمایش کاربر به پایین صفحه، محتوای بیشتری بارگذاری می‌شود.
2. نوشتن کد سمت سرور و سمت سرویس گیرنده: کد سمت سرور را برای رسیدگی به درخواست های صفحه بندی برای صفحات خاصی از داده ها می نویسید و فقط داده های آن صفحه را برمی گرداند. سپس کد سمت سرویس گیرنده را می نویسید تا به اقدامات کاربر که درخواست داده های بیشتر را تحریک می کند گوش دهید، مانند کلیک کردن روی دکمه بارگیری بیشتر یا اسکرول کردن به پایین صفحه.
3. اجرای بارگیری داده ها: زمانی که کاربر درخواستی را برای داده های بیشتر راه اندازی می کند، برنامه باید درخواستی را برای صفحه بعدی داده به سمت سرور ارسال کند. سپس سمت سرور باید فقط داده های آن صفحه را برگرداند که برنامه می تواند از آنها برای به روز رسانی صفحه استفاده کند.
4. به روز رسانی صفحه: در نهایت، صفحه را با داده های تازه بارگذاری شده به روز می کنید. این می تواند شامل الحاق داده های جدید به لیست موجود از موارد یا جایگزینی کل لیست با داده های جدید باشد.

تنظیم منبع داده

اولین قدم در پیاده سازی صفحه بندی سفارشی در React Native تنظیم منبع داده خود است. این معمولا شامل واکشی داده ها از یک API یا پایگاه داده و ذخیره آن در یک متغیر حالت است. یک REST API ساده را در نظر بگیرید که فهرستی از کتاب ها را برمی گرداند.

در اینجا مثالی از آنچه ممکن است پاسخ API به نظر برسد آورده شده است:

{
  "data": [
    {
      "id": 1,
      "title": "The Catcher in the Rye",
      "author": "J.D. Salinger"
    },
    {
      "id": 2,
      "title": "To Kill a Mockingbird",
      "author": "Harper Lee"
    },
    // ...
  ],
  "page": 1,
  "totalPages": 5
}

برای واکشی این داده‌ها در برنامه React Native، می‌توانیم از تابع fetch استفاده کنیم که یک Promise را برمی‌گرداند که با پاسخ از REST API حل می‌شود.

ایجاد یک تابع صفحه بندی سفارشی

بیایید به ایجاد تابعی ادامه دهیم که داده ها را از API واکشی می کند و وضعیت را با داده های تازه دریافت شده به روز می کند. این تابع تصمیم می‌گیرد که چه چیزی در صفحه برنامه React Native رندر شود.

ما این تابع را به عنوان یک تابع غیر همگام تعریف می کنیم که پارامتر صفحه را می گیرد و یک Promise را برمی گرداند که با داده های واکشی شده حل می شود.

const PAGE_SIZE = 10;

const fetchBooks = async (page) => {
  try {
    const response = await fetch(`https://myapi.com/books?page=${page}&pageSize=${PAGE_SIZE}`);
    const json = await response.json();
    return json.data;
  } catch (error) {
    console.error(error);
    return [];
  }
}

در بلوک کد بالا، تابع fetchBooks یک پارامتر صفحه را می گیرد و یک Promise برمی گرداند که با داده های آن صفحه حل می شود. در اینجا، ثابت PAGE_SIZE برای محدود کردن تعداد کتاب‌های واکشی در هر صفحه استفاده می‌شود.

پیاده سازی بارگذاری پویا با کمک تابع صفحه بندی سفارشی

با تعریف تابع صفحه بندی سفارشی، اکنون می توانید از آن برای پیاده سازی بارگذاری پویا در برنامه استفاده کنید. برای انجام این کار، از کامپوننت FlatList استفاده کنید، که یک مؤلفه با کارایی بالا برای رندر کردن لیست های بزرگ داده ها در React Native است.

ابتدا کامپوننت FlatList را با حالت اولیه تنظیم کنید:

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

const App = () => {
  const [books, setBooks] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    // Fetch initial page of data
    fetchBooks(currentPage).then(data => setBooks(data));
  }, []);

  const renderItem = ({ item }) => {
    return (
      <View>
        <Text style={{ fontSize: 18 }}>{item.title}</Text>
        <Text style={{ fontSize: 14 }}>{item.author}</Text>
      </View>
    );
  };

  return (
    <FlatList
      data={books}
      renderItem={renderItem}
      keyExtractor={item => item.id.toString()}
    />
  );
}

export default App;

این کد کامپوننت FlatList را با دو قسمت حالت، یعنی books و currentPage تنظیم می کند. ما از قلاب useEffect() برای واکشی صفحه اولیه داده ها هنگام اجرای برنامه ما برای اولین بار استفاده می کنیم.

در مرحله بعد، یک تابع renderItem تعریف می کنیم که یک آیتم را از آرایه کتاب ها می گیرد و یک View حاوی عنوان کتاب و نویسنده را برمی گرداند.

در نهایت، آرایه کتاب‌ها را به همراه تابع renderItem و keyExtractor به پایگاه داده FlatList منتقل کردیم.

اکنون باید مطمئن شویم که Flatlist ما می تواند تشخیص دهد که کاربر به انتهای لیست می رود. در آن مرحله، باید اقدام به واکشی و بارگذاری داده های جدید و ارائه آن کند.

برای انجام این کار، از تکیه گاه onEndReached که برای FlatList ارائه شده است، استفاده می کنیم، که زمانی که کاربر به انتهای لیست می رود، تماسی فراخوانی می شود. ما همچنین باید وضعیت صفحه فعلی خود را به روز کنیم تا از صفحه ای که در حال حاضر در آن هستیم ردیابی کنیم.

در اینجا کد به روز شده ای است که همه اینها را اجرا می کند:

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

const App = () => {
  const [books, setBooks] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    fetchBooks(currentPage).then(data => setBooks(data));
  }, []);

  const fetchMore = async () => {
    if (isLoading) return;

    setIsLoading(true);

    const nextPage = currentPage + 1;
    const newData = await fetchBooks(nextPage);

    setCurrentPage(nextPage);
    setIsLoading(false);
    setBooks(prevData => [...prevData, ...newData]);
  };

  const renderItem = ({ item }) => {
    return (
      <View style={{ padding: 16 }}>
        <Text style={{ fontSize: 18 }}>{item.title}</Text>
        <Text style={{ fontSize: 14 }}>{item.author}</Text>
      </View>
    );
  };

  return (
    <FlatList
      data={books}
      renderItem={renderItem}
      keyExtractor={item => item.id.toString()}
      onEndReached={fetchMore}
      onEndReachedThreshold={0.1}
    />
  );
}

export default App;

در اینجا دو حالت جدید به نام‌های isLoading و onEndReachedThreshold اضافه کرده‌ایم. isLoading پیگیری می‌کند که آیا در حال حاضر داده‌ها را واکشی می‌کنیم یا خیر، و onEndReachedThreshold زمانی که کاربر به 10٪ از انتهای لیست رفته است، پاسخ تماس onEndReached را فعال می‌کند.

ما یک تابع جدید به نام fetchMore ایجاد کردیم که با فعال شدن onEndReached اجرا می شود. بررسی می‌کند که آیا قبلاً داده‌ها را بارگیری می‌کنیم یا نه، و اگر نه، صفحه بعدی داده‌ها را واکشی می‌کند و لیست ما را به‌روزرسانی می‌کند.

در نهایت، لوازم جدید لازم را به جزء FlatList خود اضافه کردیم. مولفه FlatList اکنون به صورت پویا داده ها را بارگذاری می کند، زیرا کاربر به انتهای لیست می رود.

با استفاده از صفحه بندی سفارشی، عملکرد برنامه خود را بهبود بخشید

شما یاد گرفتید که چگونه داده ها را به صورت پویا در React Native با سیستم صفحه بندی سفارشی خود بارگیری کنید. این روش به شما انعطاف پذیری و کنترل بیشتری را در هنگام برخورد با حجم زیادی از داده ها در برنامه خود می دهد. به یاد داشته باشید که صفحه بندی خود را متناسب با سبک و نیازهای برنامه خود تنظیم کنید. شما می توانید آن را حتی بیشتر سفارشی کنید تا به ظاهر و عملکرد دلخواه برسید. به طور کلی، مطمئناً به شما کمک می کند تا عملکرد برنامه خود را بهینه کنید.

منبع مقاله