深入理解 React Native 中的 ListView 组件

ListView 组件是 React Native 内置的一个视图组件，用于在可垂直滚动的列表中展示一系列数据项。为了填充简单的数据块数组并实例化 ListView 组件，我们需要使用 ListView.DataSource API，并为其提供一个数据源和一个 renderRow 回调函数。

相比于 ScrollView 组件，使用 ListView 组件的主要优势在于它克服了 ScrollView 在性能上的短板。尽管在底层实现中，ListView 组件实际上依然使用 ScrollView 作为其可滚动组件，但可以将其视为一个经过性能优化的 ScrollView 高级抽象。

语法：

ListView 属性（Props）：

• dataSource：用于传入一个 ListView.DataSource 的实例对象。
• renderRow：这是一个函数，它从数据数组中取出一个数据块（blob）作为参数，并返回一个可渲染的组件。
• initialListSize：用于指定在组件初次挂载时需要渲染的行数。
• onEndReachedThreshold：用于指定触发 onEndReached 事件的阈值（单位为像素）。
• pageSize：用于指定每个事件循环中要渲染的行数。
• renderScrollComponent：用于返回一个可滚动组件，列表的行将渲染在该组件内部。
• scrollRenderAheadDistance：指定当行距离屏幕出现还有多远时（提前量）开始渲染列表行。
• stickyHeaderIndices：这是一个子索引数组，用于指定在滚动时需要吸附在屏幕顶部的子元素。
• enableEmptySections：这是一个布尔值标志，用于指示是否需要渲染空的区块头部。
• onEndReached：当所有行都已渲染在屏幕上，且列表滚动到了 onEndReachedThreshold 定义的阈值内时，会调用此函数。
• stickySectionHeadersEnabled：顾名思义，它用于让区块的头部具有粘性（即滚动时吸附在顶部）。
• renderSectionHeader：如果提供了此属性，则会为特定的区块渲染一个头部。
• renderSeparator：如果提供了此属性，则会在每一行（除了最后一行）下面添加一个可渲染的组件作为分隔线。
• onChangeVisibleRows：仅当部分可见行发生变化时才会调用此函数。
• removeClippedSubviews：用于性能优化，主要用于与行容器上的 overflow: ‘hidden‘ 配合使用。
• renderFooter：如果提供了这些属性，头部和尾部会在每次渲染传递时始终被渲染。

ListView 方法：

• getMetrics()：用于导出数据的函数，主要用于分析目的。
• scrollTo()：用于滚动到给定的 x-y 偏移量的函数。
• scrollToEnd()：用于滚动列表的函数。如果是垂直 ListView，它会滚动到列表底部；如果是水平 ListView，它会滚动到最右侧。
• flashScrollIndicators()：用于短暂显示滚动指示器的函数。

INLINECODEb27fd566 组件虽然在现在已被标记为废弃，但它曾经是 React Native 中高效渲染列表项的标准方案。它的继任者 INLINECODEa13de087 提供了更好的性能和更丰富的功能。

现在让我们开始进行实现：

• 步骤 1： 打开终端并运行以下命令安装 expo-cli。

npm install -g expo-cli

• 步骤 2： 接下来通过以下命令创建一个项目。

expo init listview-demo

• 步骤 3： 进入你的项目文件夹，即 listview-demo。

cd listview-demo

项目结构： 它看起来像这样。
示例： ListView 组件的基本用法

App.js


“

import React, { Component } from "react";

import { Text, View, StyleSheet, ListView } from "react-native";

import { Icon } from "react-native-elements";

const ds = new ListView.DataSource({

rowHasChanged: (r1, r2) => r1 !== r2

});

class App extends Component {

state = {

dataSource: ds.cloneWithRows([

"Data Structures",

"STL",

"C++",

"Java",

"Python",

"ReactJS",

"Angular",

"NodeJs",

"PHP",

"MongoDb",

"MySql",

"Android",

"iOS",

"Hadoop",

"Ajax",

"Ruby",

"Rails",

".Net",

"Perl",

]),

};

render() {

return (

<ListView

dataSource={this.state.dataSource}

renderRow={(rowData) => (

{rowData}

)}

/>

);

}

}

// Screen styles

const styles = StyleSheet.create({

screen: {

marginTop: 30,

},

row: {

margin: 15,