資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 React Native 中使用 VirtualizedList 元件？
當列表規模非常龐大時，VirtualizedList 元件是最佳選擇。VirtualizedList 有助於提高效能和記憶體使用效率。當用戶滾動時，資料才會顯示給使用者。
VirtualizedList 的基本元件如下：
<VirtualizedList data={DATA} initialNumToRender={4} renderItem={renderItem} keyExtractor={keyExtractor} getItemCount={getItemCount} getItem={getItem} />重要的 VirtualizedList 屬性
| 屬性 | 描述 |
|---|---|
| renderItem | 來自資料中的專案將在 VirtualizedList 內渲染。 |
| data | 要顯示的資料。 |
| getItem | 從資料中獲取單個專案的函式。 |
| getItemCount | 獲取資料專案的數量。 |
| initialNumToRender | 開始時要渲染的次數。 |
| keyExtractor | 為指定索引的每個專案考慮的唯一鍵。 |
這是一個 VirtualizedList 的工作示例。
示例：使用 VirtualizedList 顯示資料
要使用 VirtualizedList，首先需要匯入它，如下所示：
import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native';VirtualizedList 的程式碼如下：
<SafeAreaView>
<VirtualizedList
data={DATA}
initialNumToRender={4}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.id}
getItemCount={getItemCount}
getItem={getItem}
/>
</SafeAreaView>我們想要顯示的初始渲染專案為 4 個。renderItem 屬性用於在螢幕上顯示專案。它使用瞭如下所示定義的自定義 Item 元件：
const Item = ({ title })=> {
return (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
}**keyExtractor** 定義了每個專案的唯一鍵。
keyExtractor={item => item.id}getItemCount 屬性獲取將顯示給使用者的專案的總數。目前它呼叫瞭如下定義的 getItemCount 函式。
const getItemCount = (data) => {
return 100;
}
getItemCount={getItemCount}getITem 屬性旨在獲取要顯示的資料。它呼叫了 getItem 方法，該方法定義如下：
const getItem = (data, index) => {
return {
id: index,
title: 'test'
}
}
getItem={getItem}顯示 VirtualizedList 的完整程式碼如下：
import React from 'react';
import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native';
const DATA = [];
const getItem = (data, index) => {
return {
id: index,
title: 'test'
}
}
const getItemCount = (data) => {
return 100;
}
const Item = ({ title })=> {
return (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
}
const VirtualizedListExample = () => {
return (
<SafeAreaView>
<VirtualizedList
data={DATA}
initialNumToRender={4}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.id}
getItemCount={getItemCount}
getItem={getItem}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
item: {
backgroundColor: '#ccc',
height: 100,
justifyContent: 'center',
marginVertical: 8,
marginHorizontal: 16,
padding: 20,
},
title: {
fontSize: 32,
},
});
export default VirtualizedListExample;輸出
更新於: 2021-07-01
2K+ 次檢視
廣告