18、React Native 列表渲染与进度展示

React Native 列表渲染与进度展示

1. 列表排序与过滤

在掌握了 ListView 组件基础以及传递 DataSource 实例后，我们可以为列表添加一些控制功能。 ListView 组件可用于渲染列表控件的固定位置内容，同时我们也需要了解如何操作数据源，以驱动屏幕上的渲染内容。

组件结构

以下是要实现的组件结构及各自职责：
| 组件名称 | 职责 |
| ---- | ---- |
| ListContainer | 列表的整体容器，遵循常见的 React 容器模式 |
| List | 无状态组件，将相关状态传递给 ListControls 和 ListView 组件 |
| ListControls | 包含改变列表状态的各种控件 |
| ListFilter | 用于过滤项目列表的控件 |
| ListSort | 用于改变列表排序顺序的控件 |
| ListView | 实际渲染项目的 React Native 组件 |

实现步骤

• ListContainer 组件 ：

import React, { Component } from 'react';
import { ListView } from 'react-native';