Khóa học react-native

RefreshControl trong React Native

0 phút đọc

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.

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ụ:

<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ụ:

<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ụ:

<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ụ:

<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.DEFAULTRefreshControl.SIZE.LARGE.

Ví dụ:

<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ụ:

<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ụ:

<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ụ:

<RefreshControl titleColor="#ff0000" />

Ví Dụ Chi Tiết về RefreshControl

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

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

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

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ụ:

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

npm install react-native-web-refresh-control

Sử Dụng Thư Viện

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

npm install react-native-gesture-handler

Sử Dụng Thư Viện

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ụ:

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ụ:

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ế:

  1. 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.
  2. 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.
  3. 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

Avatar
Được viết bởi

TechMely Team

Gợi ý câu hỏi phỏng vấn

entry

React Native là gì?

entry

What is React Native?

entry

List some benefits of using React Native for building mobile apps?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào