Kết hợp FlatList với Swipeable trong React Native

5/5 - (1 bình chọn)

Giới thiệu

SwipeableFlatList là một component tùy chỉnh kết hợp giữa FlatList với Swipeable trong React Native và React Native Gesture Handler với SwipeableFlatList bạn có thể dễ dàng tạo danh sách có thể vuốt ngang để thực hiện các chức năng khác như thêm, sửa, xoá, like…

Package này sử dụng các thành phần lõi, thông thường từ FlatList và Swipeable được liệt kê ở trên – vì vậy, Package này sẽ hoạt động với bất kỳ Ứng dụng gốc React nào và có hiệu suất cao trên cả hai nền tảng.

Ngoài ra bạn cũng có thể tuỷ chỉnh hoặc bổ sung chắc tính năng FlatList & Swipeable để hỗ trợ các yêu cầu và mục đích của riêng bạn.

Bạn có thể xem qua ví dụ thông qua project này trên Github: react native swipable flatlist example

Kết hợp FlatList với Swipeable trong React Native

Hướng dẫn sử dụng kết hợp FlatList với Swipeable

1. Cài đặt

Bạn có thể cài đặt package này thông qua npm hoặc yarn:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”yes” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”yes” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

npm install rn-gesture-swipeable-flatlist

yarn add rn-gesture-swipeable-flatlist

[/dm_code_snippet]

2. Sử dụng

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

import SwipeableFlatList from 'rn-gesture-swipeable-flatlist';

// Example usage
const MyComponent = () => {
  const data = [...]; // Your data array
  const renderItem = ({ item }) => {
    // Render individual list items
    return (
      // Your list item component JSX
    );
  };

  const renderLeftActions = (item) => {
    // Render left swipe actions for each item
    return (
      // Your left actions component JSX
    );
  };

  const renderRightActions = (item) => {
    // Render right swipe actions for each item
    return (
      // Your right actions component JSX
    );
  };

  return (
    <SwipeableFlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={renderItem}
      renderLeftActions={renderLeftActions}
      renderRightActions={renderRightActions}
    />
  );
};

[/dm_code_snippet]

3. Props

FlatlistProps:

Vì gesture-swipeable-flatlist sử dụng package Flatlist gốc của react-native chính vì thế hầu như props của gesture-swipeable-flatlist không hề khác Flatlist bạn có thể xem qua tại đây: Link

SwipeableProps: