React Native 上手 - 6.ListView

React Native

上一篇：React Native 上手 - 5.ScrollView

列表视图 ListView

ListView 是一个特殊的 ScrollView，用来展示一个纵向排列结构相似的内容。

ListView 可以高效地处理大量数据，它不像 ScrollView 将所有包含其中的组件都渲染出来，它只会渲染当前会显示在屏幕上的内容。

ListView 组件创建时需要设置两个属性：

• dataSource：列表视图显示内容的数据源。
• renderRow：渲染每行内容的方法。

下面展示一个实例：

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

export default class HelloWorld extends Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

这个例子中，先创建一个 ListView.DataSource，在创建时，需要提供一个 rowHasChanged 函数，在当数据源中的数据发生变化时被触发。

根组件被创建时，我们往数据源中写入一些数据。在 renderRow 函数中，将每一行数据渲染成一个 Text 组件。

运行效果如下：

ListView

下一篇：React Native 上手 - 7.网络