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

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

VirtualizedList 的基本组件如下 &minuns;

登录后复制

重要的 VirtualizedList 属性

renderItem将渲染数据中的项目VirtualizedList 内。data要显示的数据。getItem获取单个项目的函数getItemCount获取数据项的数量。initialNumToRender开始时渲染的次数。keyExtractor每个要考虑的唯一键指定索引的项目。

这是 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 定义每个项目的唯一键。

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;

登录后复制

输出

以上就是解释一下 ReactNative 中 VirtualizedList 组件的用法？的详细内容，更多请关注【创想鸟】其它相关文章！