解释一下 ReactNative 中 VirtualizedList 组件的用法？

当您的列表非常大时，virtualizedlist 组件是最好的。virtualizedlist 有助于提高性能和内存使用率。当用户滚动时，数据会显示给用户。

VirtualizedList 的基本组件如下 &minuns;

重要的 VirtualizedList 属性

这是 VirtualizedList 的工作示例。

示例：使用 VirtualizedList 显示数据

要使用 VirtualizedList，请首先按如下方式导入它 -

import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native';

VirtualizedList的代码如下 -

    }
      keyExtractor={item => item.id}
      getItemCount={getItemCount}
      getItem={getItem}
   />

我们要显示渲染的初始项目是 4。renderItem 属性用于在屏幕上显示项目。它使用定义如下所示的自定义 Item 组件 -

const Item = ({ title })=> {
   return (
      
      {title}
      
   );
}

keyExtractor 定义每个项目的唯一键。

CSS3圆形图片鼠标经过旋转效果

CSS3圆形图片鼠标经过旋转效果，图片上有简短标题和说明，兼容主流浏览器，php中文网推荐下载！ 使用方法： 1、在head区域引入样式表文件lrtk.css 2、在你的网页中加入注释区域代码即可 3、图片为方形，宽高在220像素以上，并有一定空白边距效果较好。

下载

keyExtractor={item => item.id}

props 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 (
      
         {title}
         
      );
   }
   const VirtualizedListExample = () => {
      return (
         
             }
               keyExtractor={item => item.id}
               getItemCount={getItemCount}
               getItem={getItem}
         />
         
      );
   }
   const styles = StyleSheet.create({
   item: {
      backgroundColor: '#ccc',
      height: 100,
      justifyContent: 'center',
      marginVertical: 8,
      marginHorizontal: 16,
      padding: 20,
   },
   title: {
      fontSize: 32,
   },
});
export default VirtualizedListExample;

输出