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