KUNGFU TECH vietnam

Khóa học react-native

ScrollView trong React Native

0 phút đọc

ScrollView là một trong những thành phần cơ bản và quan trọng trong React Native, cho phép bạn tạo ra các vùng cuộn để hiển thị nội dung dài hơn kích thước màn hình. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về ScrollView, cách sử dụng nó, các thuộc tính quan trọng, và các ví dụ cụ thể để minh họa.

Giới Thiệu về ScrollView

ScrollView là một thành phần cuộn chung có thể chứa nhiều thành phần và view khác nhau. Các mục cuộn có thể không đồng nhất, và bạn có thể cuộn cả theo chiều dọc và chiều ngang bằng cách thiết lập thuộc tính horizontal.

Cú Pháp Cơ Bản

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

const App = () => {
  return (
    <ScrollView style={styles.scrollView}>
      <Text style={styles.text}>Hello, World!</Text>
      <Text style={styles.text}>Welcome to React Native ScrollView</Text>
      <Text style={styles.text}>Scroll down to see more content</Text>
      {/* Thêm nhiều nội dung hơn để cuộn */}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});

export default App;

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

horizontal

Thuộc tính horizontal xác định liệu ScrollView có cuộn theo chiều ngang hay không. Mặc định là false.

Ví dụ:

<ScrollView horizontal={true}>
  <Text style={styles.text}>Item 1</Text>
  <Text style={styles.text}>Item 2</Text>
  <Text style={styles.text}>Item 3</Text>
</ScrollView>

pagingEnabled

Thuộc tính pagingEnabled cho phép cuộn qua các trang bằng cử chỉ vuốt. Điều này rất hữu ích khi bạn muốn tạo ra các trang cuộn.

Ví dụ:

<ScrollView pagingEnabled={true}>
  <View style={styles.page}>
    <Text>Page 1</Text>
  </View>
  <View style={styles.page}>
    <Text>Page 2</Text>
  </View>
  <View style={styles.page}>
    <Text>Page 3</Text>
  </View>
</ScrollView>

onScroll

Thuộc tính onScroll cho phép bạn xác định một hành động sẽ được thực thi khi người dùng cuộn ScrollView.

Ví dụ:

<ScrollView onScroll={(e) => console.log(e.nativeEvent.contentOffset.y)}>
  <Text style={styles.text}>Scroll to see the console log</Text>
</ScrollView>

refreshControl

Thuộc tính refreshControl cho phép bạn thêm chức năng kéo để làm mới vào ScrollView.

Ví dụ:

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

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

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

  return (
    <ScrollView
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    >
      <Text style={styles.text}>Pull down to refresh</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 42,
    textAlign: "center",
    marginVertical: 20,
  },
});

export default App;

Ví Dụ Chi Tiết về ScrollView

Ví Dụ 1: Cuộn Dọc với Nhiều Nội Dung

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

const App = () => {
  return (
    <ScrollView style={styles.scrollView}>
      <Text style={styles.text}>Hello, World!</Text>
      <Text style={styles.text}>Welcome to React Native ScrollView</Text>
      <Text style={styles.text}>Scroll down to see more content</Text>
      <Text style={styles.text}>More content...</Text>
      <Text style={styles.text}>Even more content...</Text>
      <Text style={styles.text}>Keep scrolling...</Text>
      <Text style={styles.text}>Almost there...</Text>
      <Text style={styles.text}>You made it!</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
    marginVertical: 10,
  },
});

export default App;

Hình ảnh minh họa:

Vertical ScrollView

Ví Dụ 2: Cuộn Ngang với Hình Ảnh

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

const App = () => {
  return (
    <ScrollView horizontal={true} style={styles.scrollView}>
      <Image
        source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
        style={styles.image}
      />
      <Image
        source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
        style={styles.image}
      />
      <Image
        source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
        style={styles.image}
      />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    marginHorizontal: 20,
  },
  image: {
    width: 100,
    height: 100,
    marginHorizontal: 10,
  },
});

export default App;

Hình ảnh minh họa:

Horizontal ScrollView

Ví Dụ 3: Cuộn với Chức Năng Kéo Để Làm Mới

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

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

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

  return (
    <ScrollView
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    >
      <Text style={styles.text}>Pull down to refresh</Text>
      <Text style={styles.text}>More content...</Text>
      <Text style={styles.text}>Even more content...</Text>
      <Text style={styles.text}>Keep scrolling...</Text>
      <Text style={styles.text}>Almost there...</Text>
      <Text style={styles.text}>You made it!</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 42,
    textAlign: "center",
    marginVertical: 20,
  },
});

export default App;

Hình ảnh minh họa:

Pull to Refresh

So Sánh ScrollView và FlatList

ScrollView và FlatList đều là các thành phần cuộn trong React Native, nhưng chúng có những điểm khác biệt quan trọng:

  • ScrollView: Renders tất cả các phần tử con cùng một lúc, phù hợp cho các danh sách ngắn hoặc nội dung không đồng nhất.
  • FlatList: Renders các phần tử một cách lười biếng khi chúng sắp xuất hiện trên màn hình, phù hợp cho các danh sách dài và đồng nhất.

Ví dụ về FlatList:

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

const DATA = [
  { id: "1", title: "Item 1" },
  { id: "2", title: "Item 2" },
  { id: "3", title: "Item 3" },
  // Thêm nhiều mục hơn
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  return (
    <FlatList
      data={DATA}
      renderItem={({ item }) => <Item title={item.title} />}
      keyExtractor={(item) => item.id}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

Kết Luận

ScrollView là một công cụ mạnh mẽ và linh hoạt trong React Native, cho phép bạn tạo ra các vùng cuộn để hiển thị nội dung dài hơn kích thước màn hình. Bằng cách hiểu rõ các thuộc tính và cách sử dụng ScrollView, bạn có thể tạo ra các giao diện người dùng mượt mà và hiệu quả. Hy vọng qua bài viết này, bạn đã có thể nắm bắt được cách sử dụng ScrollView trong React Native và áp dụng vào các dự án của mình.

Avatar
Được viết bởi

TechMely Team

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

Gợi ý bài viết

Bình luận

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

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

Khoá học javascript từ cơ bản đến chuyên sâuYoutube Techmely