反应原生 ListView 组件

ListView 组件是一个内置的 React Native 视图组件，它在可垂直滚动的列表中显示项目列表。它需要一个ListView.DataSource API 来填充一个简单的数据 blob 数组，并使用数据源和 renderRow 回调实例化 ListView 组件。

使用 ListView 组件优于 ScrollView 组件的主要优点是它克服了 ScrollView 组件的性能缺点。然而，在幕后，ListView 组件使用 ScrollView 作为其可滚动组件。因此，ListView 组件是对 ScrollView 组件进行优化的抽象。

句法：

ListView 道具：

dataSource ：它提供了要使用的 ListView.DataSource 的实例。
renderRow ：它用于从数据数组中获取一个 blob 作为参数并返回一个可渲染组件。
initialListSize ：用于指定组件初始挂载时要渲染的行数。
onEndReachedThreshold ：用于指定调用 onEndReached 的阈值（以像素为单位）。
pageSize ：用于指定每个事件循环要渲染的行数。
renderScrollComponent ：用于返回渲染列表行的可滚动组件。
scrollRenderAheadDistance ：它指定在列表行出现在屏幕上之前多早开始渲染列表行。
stickyHeaderIndices ：它是一个子索引数组，指定滚动时要停靠到屏幕顶部的子索引。
enableEmptySections ：它是一个标志，指示是否需要呈现空的节标题。
onEndReached ：当所有行都已在屏幕上呈现并且列表已滚动到 onEndReachedThreshold 内时调用。
stickySectionHeadersEnabled ：顾名思义，它用于使节标题具有粘性。
renderSectionHeader ：如果提供此属性，则会为特定部分呈现标题。
renderSeparator ：如果提供了此属性，则添加一个可渲染组件（在除最后一行之外的每一行下方渲染为分隔符）。
onChangeVisibleRows ：仅当某些可见行发生更改时才调用它。
removeClippedSubviews : 用于性能优化，主要与 overflow: 'hidden' 结合使用在行容器上。
renderFooter ：如果提供了这些道具，则页眉和页脚总是在每次渲染过程中渲染。

列表视图方法：

getMetrics() ：用于导出数据的函数，主要用于分析目的。
scrollTo() ：用于滚动到给定 xy 偏移的函数。
scrollToEnd() ：用于滚动列表的函数。在垂直ListView的情况下，它用于滚动到列表的底部。在水平ListView的情况下，它用于向右滚动。
flashScrollIndicators() ：用于简要显示滚动指示器的函数。

现在让我们从实现开始：

第 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 (
      
         (
            
              {rowData}
              
            
          )}
        />
      
    );
  }
}
  
// Screen styles
const styles = StyleSheet.create({
  screen: {
    marginTop: 30,
  },
  row: {
    margin: 15,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 2,
  },
  rowText: {
    fontSize: 18,
  },
});
  
export default App;

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

注意：重要的是要注意 ListView 组件现在已弃用。而是使用较新的组件，例如 FlatList 或 SectionList。要使用 ListView 组件，请使用 deprecated-react-native-listview 包。

import ListView from "deprecated-react-native-listview";

参考： https://reactnative.dev/docs/0.62/listview