RefreshControl trong React Native

RefreshControl là một component trong React Native cho phép bạn thêm chức năng "kéo để làm mới" (pull-to-refresh) vào các thành phần cuộn như ScrollView, FlatList, và SectionList. Chức năng này rất phổ biến trong các ứng dụng di động, cho phép người dùng làm mới nội dung bằng cách kéo xuống từ đầu danh sách. RefreshControl cung cấp các phương thức và thuộc tính để bạn có thể tùy chỉnh và kiểm soát hành vi của nó, giúp tạo ra các trải nghiệm người dùng mượt mà và hiệu quả.

Cú Pháp Cơ Bản

Để sử dụng RefreshControl trong React Native, bạn cần import nó từ thư viện react-native và sử dụng các thuộc tính của nó để điều chỉnh hành vi và giao diện của refresh control.

javascript Copy

import React, { useState } from "react";
import {
  View,
  ScrollView,
  RefreshControl,
  Text,
  StyleSheet,
} from "react-native";

const App = () => {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  };

  return (
    <ScrollView
      contentContainerStyle={styles.scrollView}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    >
      <Text>Pull down to see RefreshControl indicator</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default App;

Các Thuộc Tính Quan Trọng của RefreshControl

refreshing

Thuộc tính refreshing xác định liệu refresh control có đang hoạt động hay không. Đây là một thuộc tính bắt buộc và có giá trị boolean.

Ví dụ:

javascript Copy

<RefreshControl refreshing={refreshing} />

onRefresh

Thuộc tính onRefresh là một hàm callback được gọi khi người dùng kéo để làm mới. Hàm này thường được sử dụng để cập nhật trạng thái refreshing và thực hiện các hành động làm mới dữ liệu.

Ví dụ:

javascript Copy

<RefreshControl onRefresh={onRefresh} />

colors (Android Only)

Thuộc tính colors xác định màu sắc của chỉ báo làm mới trên Android. Nó nhận vào một mảng các màu.

Ví dụ:

javascript Copy

<RefreshControl colors={["#ff0000", "#00ff00", "#0000ff"]} />

progressBackgroundColor (Android Only)

Thuộc tính progressBackgroundColor xác định màu nền của chỉ báo làm mới trên Android.

Ví dụ:

javascript Copy

<RefreshControl progressBackgroundColor="#ffffff" />

size (Android Only)

Thuộc tính size xác định kích thước của chỉ báo làm mới trên Android. Các giá trị có thể bao gồm RefreshControl.SIZE.DEFAULT và RefreshControl.SIZE.LARGE.

Ví dụ:

javascript Copy

<RefreshControl size={RefreshControl.SIZE.LARGE} />

tintColor (iOS Only)

Thuộc tính tintColor xác định màu sắc của chỉ báo làm mới trên iOS.

Ví dụ:

javascript Copy

<RefreshControl tintColor="#ff0000" />

title (iOS Only)

Thuộc tính title xác định tiêu đề hiển thị dưới chỉ báo làm mới trên iOS.

Ví dụ:

javascript Copy

<RefreshControl title="Pull to refresh" />

titleColor (iOS Only)

Thuộc tính titleColor xác định màu sắc của tiêu đề chỉ báo làm mới trên iOS.

Ví dụ:

javascript Copy

<RefreshControl titleColor="#ff0000" />

Ví Dụ Chi Tiết về RefreshControl

Ví Dụ 1: Sử Dụng RefreshControl với ScrollView

javascript Copy

import React, { useState } from "react";
import {
  View,
  ScrollView,
  RefreshControl,
  Text,
  StyleSheet,
} from "react-native";

const ScrollViewExample = () => {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  };

  return (
    <ScrollView
      contentContainerStyle={styles.scrollView}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    >
      <Text>Pull down to see RefreshControl indicator</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default ScrollViewExample;

Ví Dụ 2: Sử Dụng RefreshControl với FlatList

javascript Copy

import React, { useState } from "react";
import { View, FlatList, RefreshControl, Text, StyleSheet } from "react-native";

const FlatListExample = () => {
  const [refreshing, setRefreshing] = useState(false);
  const [data, setData] = useState([
    { key: "Item 1" },
    { key: "Item 2" },
    { key: "Item 3" },
    { key: "Item 4" },
    { key: "Item 5" },
  ]);

  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      setData([...data, { key: `Item ${data.length + 1}` }]);
      setRefreshing(false);
    }, 2000);
  };

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
      keyExtractor={(item) => item.key}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    fontSize: 18,
    height: 44,
  },
});

export default FlatListExample;

Ví Dụ 3: Sử Dụng RefreshControl với SectionList

javascript Copy

import React, { useState } from "react";
import {
  View,
  SectionList,
  RefreshControl,
  Text,
  StyleSheet,
} from "react-native";

const SectionListExample = () => {
  const [refreshing, setRefreshing] = useState(false);
  const [sections, setSections] = useState([
    { title: "Section 1", data: ["Item 1", "Item 2"] },
    { title: "Section 2", data: ["Item 3", "Item 4"] },
  ]);

  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      setSections([
        ...sections,
        {
          title: `Section ${sections.length + 1}`,
          data: [
            `Item ${sections.length * 2 + 1}`,
            `Item ${sections.length * 2 + 2}`,
          ],
        },
      ]);
      setRefreshing(false);
    }, 2000);
  };

  return (
    <SectionList
      sections={sections}
      renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
      renderSectionHeader={({ section }) => (
        <Text style={styles.header}>{section.title}</Text>
      )}
      keyExtractor={(item, index) => item + index}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    fontSize: 18,
    height: 44,
  },
  header: {
    fontSize: 24,
    backgroundColor: "#f4f4f4",
    padding: 10,
  },
});

export default SectionListExample;

Tùy Chỉnh RefreshControl

Sử Dụng Các Tùy Chọn Tùy Chỉnh

Bạn có thể sử dụng các tùy chọn tùy chỉnh để thay đổi giao diện và hành vi của RefreshControl.

Ví dụ:

javascript Copy

import React, { useState } from "react";
import {
  View,
  ScrollView,
  RefreshControl,
  Text,
  StyleSheet,
} from "react-native";

const CustomRefreshControl = () => {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  };

  return (
    <ScrollView
      contentContainerStyle={styles.scrollView}
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={onRefresh}
          colors={["#ff0000", "#00ff00", "#0000ff"]}
          progressBackgroundColor="#ffffff"
          size={RefreshControl.SIZE.LARGE}
          tintColor="#ff0000"
          title="Pull to refresh"
          titleColor="#ff0000"
        />
      }
    >
      <Text>Pull down to see RefreshControl indicator</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default CustomRefreshControl;

Sử Dụng Thư Viện Bên Ngoài

Nếu bạn cần các tính năng phức tạp hơn, bạn có thể sử dụng các thư viện bên ngoài như react-native-web-refresh-control hoặc react-native-gesture-handler.

Sử Dụng react-native-web-refresh-control

Cài Đặt Thư Viện

bash Copy

npm install react-native-web-refresh-control

Sử Dụng Thư Viện

javascript Copy

import React, { useState } from "react";
import { View, ScrollView, Text, StyleSheet } from "react-native";
import { RefreshControl } from "react-native-web-refresh-control";

const WebRefreshControlExample = () => {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  };

  return (
    <ScrollView
      contentContainerStyle={styles.scrollView}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    >
      <Text>
        This scrollview will have pull-to-refresh functionality on the web
      </Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default WebRefreshControlExample;

Sử Dụng react-native-gesture-handler

Cài Đặt Thư Viện

bash Copy

npm install react-native-gesture-handler

Sử Dụng Thư Viện

javascript Copy

import React, { useState } from "react";
import { View, FlatList, Text, StyleSheet } from "react-native";
import { RefreshControl } from "react-native-gesture-handler";

const GestureHandlerExample = () => {
  const [refreshing, setRefreshing] = useState(false);
  const [data, setData] = useState([
    { key: "Item 1" },
    { key: "Item 2" },
    { key: "Item 3" },
    { key: "Item 4" },
    { key: "Item 5" },
  ]);

  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      setData([...data, { key: `Item ${data.length + 1}` }]);
      setRefreshing(false);
    }, 2000);
  };

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
      keyExtractor={(item) => item.key}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    fontSize: 18,
    height: 44,
  },
});

export default GestureHandlerExample;

Các Kỹ Thuật Tối Ưu Hóa Sử Dụng RefreshControl

Sử Dụng StyleSheet để Tối Ưu Hóa Hiệu Suất

Sử dụng StyleSheet.create để định nghĩa các style giúp tối ưu hóa hiệu suất vì các style được tạo ra chỉ một lần và được tham chiếu lại nhiều lần.

Ví dụ:

javascript Copy

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

Tránh Sử Dụng Hàm Inline

Tránh sử dụng các hàm inline cho thuộc tính onRefresh để tránh việc tạo lại hàm mỗi khi component được render.

Ví dụ:

javascript Copy

const onRefresh = () => {
  setRefreshing(true);
  setTimeout(() => {
    setRefreshing(false);
  }, 2000);
};

<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />;

Các Hạn Chế của RefreshControl Component

Mặc dù RefreshControl component trong React Native rất mạnh mẽ, nhưng nó cũng có một số hạn chế:

Tùy Chỉnh Giao Diện: RefreshControl không hỗ trợ nhiều tùy chỉnh giao diện như thay đổi font chữ, thêm biểu tượng, hoặc tạo nền gradient.
Hiệu Suất: Khi sử dụng quá nhiều sự kiện lắng nghe thay đổi kích thước, hiệu suất của ứng dụng có thể bị ảnh hưởng.
Quản Lý Sự Kiện: Khi có nhiều sự kiện lắng nghe được đăng ký, việc quản lý và loại bỏ chúng có thể trở nên phức tạp.

Kết Luận

RefreshControl là một thành phần cơ bản và quan trọng trong React Native, giúp bạn tạo ra các giao diện người dùng mượt mà và hiệu quả. B

Cú Pháp Cơ Bản

Các Thuộc Tính Quan Trọng của RefreshControl

refreshing

onRefresh

colors (Android Only)

progressBackgroundColor (Android Only)

size (Android Only)

tintColor (iOS Only)

title (iOS Only)

titleColor (iOS Only)

Ví Dụ Chi Tiết về RefreshControl

Ví Dụ 1: Sử Dụng RefreshControl với ScrollView

Ví Dụ 2: Sử Dụng RefreshControl với FlatList

Ví Dụ 3: Sử Dụng RefreshControl với SectionList

Tùy Chỉnh RefreshControl

Sử Dụng Các Tùy Chọn Tùy Chỉnh

Sử Dụng Thư Viện Bên Ngoài

Sử Dụng react-native-web-refresh-control

Sử Dụng react-native-gesture-handler

Các Kỹ Thuật Tối Ưu Hóa Sử Dụng RefreshControl

Sử Dụng StyleSheet để Tối Ưu Hóa Hiệu Suất

Tránh Sử Dụng Hàm Inline

Các Hạn Chế của RefreshControl Component

Kết Luận

Bình luận