推荐使用:FlashList - 高性能的React Native列表组件
FlashList 是一个高性能的 React Native 列表组件,它通过优化渲染管道和内存使用来提供平滑的滚动体验。以下是一个简单的使用示例:
import React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
const FlashListExample = () => {
const items = Array(1000).fill('Item'); // 生成一个包含1000个'Item'的数组
return (
<View style={styles.container}>
<FlashList
data={items}
renderItem={({ item, index }) => (
<View style={styles.item}>
<Text style={styles.text}>{item}</Text>
</View>
)}
keyExtractor={(item, index) => `item-${index}`}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
item: {
height: 100,
backgroundColor: '#f9f9f9',
borderBottomWidth: 1,
borderColor: '#eee',
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
},
});
export default FlashListExample;
在这个例子中,我们创建了一个包含1000个条目的列表,并为每个条目指定了一个唯一的key。FlashList 组件使用FlatList来渲染列表,并通过样式定义了每个条目的高度、背景颜色和文本样式。这个简单的示例展示了如何使用FlashList来创建一个性能良好的列表界面。
评论已关闭