ReactNative的ListView简述

上篇文章, 熟悉了ScrollView, 这次来看看ListView. 把稍复杂一点的控件熟悉一下, 再通过具体的项目学习框架. JSX的语法非常简洁, 写出同样的功能, 要清晰许多.

1. 准备

新建一个项目, 修改入口index.android.js.

'use strict';

var React = require('react-native');

var {
  AppRegistry,
} = React;

var ListViewModule = require('./list_view_module/index');

AppRegistry.registerComponent('RnListView', () => ListViewModule);

在list_view_module文件夹中, 编写我们的Demo.

2. 样式

ListView的基本样式就是flex: 1, 需要定义行(row)样式(styles .button), 图片样式(styles.image)是圆角矩形.

'use strict'

var React = require('react-native');

var {
  StyleSheet,
} = React;

var styles = StyleSheet.create({
  button: {
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    margin: 10,
  },

  image: {
    flex: 1,
    height: 200,
    borderRadius: 5,
    borderWidth: 2,
    borderColor: '#FF1492',
  },
});

module.exports = styles;

3. 逻辑

逻辑非常简单: 连续显示图片, 每行可以点击, 提示图片内容.

'use strict'

var React = require('react-native');

var {
  Text,
  Image,
  TouchableOpacity, // 按钮
  ListView,
  View,
  ToastAndroid,
} = React;

var styles = require('./styles');

// 图片
var IMAGES = [
  require('./images/total_girls.png'),
  require('./images/jessicajung.png'),
  require('./images/kimhyoyeon.png'),
  require('./images/seohyun.png'),
  require('./images/sooyoung.png'),
  require('./images/sunny.png'),
  require('./images/taeyeon.png'),
  require('./images/tiffany.png'),
  require('./images/yoona.png'),
  require('./images/yuri.png'),
];

// 名字
var NAMES = [
  'Girls\' Generation',
  'Jessica Jung',
  'Kim Hyo Yeon',
  'Seo Hyun',
  'Soo Young',
  'Sunny',
  'Taeyeon',
  'Tiffany',
  'Yoona',
  'Yuri'
];

var ListViewModule = React.createClass({

  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(this._genRows())
    };
  },

  _genRows: function() {
    var re = [];
    for (var i=0; i<IMAGES.length; ++i) {
      re.push([ NAMES[i%NAMES.length], IMAGES[i%IMAGES.length] ]);
    }
    return re;
  },

  // 点击事件
  _pressRow: function(rowToast: string) {
    ToastAndroid.show(rowToast, ToastAndroid.SHORT);
  },

  _renderRow: function(rowData: array, sectionID: number, rowID: number) {
    return (
      <TouchableOpacity onPress={() => this._pressRow(rowData[0])}> <View> <View style={styles.button}> <Image style={styles.image} source={rowData[1]} /> </View> </View> </TouchableOpacity> ); }, render: function() { return( <ListView  dataSource={this.state.dataSource} renderRow={this._renderRow} /> ); } }); module.exports = ListViewModule;

下面我们说说要点, ListView的本质是从dataSource中提取数组数据, 行数就是数组长度, 按照行(row)赋予数组中的元素.

生成数据源: 判断更新状况, 把内容+图片的数组添加到DataSource.

  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); return { dataSource: ds.cloneWithRows(this._genRows()) }; }, _genRows: function() { var re = []; for (var i=0; i<IMAGES.length; ++i) { re.push([ NAMES[i%NAMES.length], IMAGES[i%IMAGES.length] ]); } return re; },

行视图, rowData是行数据, rowID是行号; 在点击时提示内容rowData[0], 显示图片资源rowData[1]. _renderRow负责创建行视图.

  // 点击事件
  _pressRow: function(rowToast: string) {
    ToastAndroid.show(rowToast, ToastAndroid.SHORT);
  },

  _renderRow: function(rowData: array, sectionID: number, rowID: number) {
    return (
      <TouchableOpacity onPress={() => this._pressRow(rowData[0])}>
        <View>
          <View style={styles.button}>
            <Image style={styles.image} source={rowData[1]} />
          </View>
        </View>
      </TouchableOpacity>
    );
  },

使用ListView, 数据源(dataSource)和行渲染(renderRow)都已经创建, 赋值入ListView即可.

  render: function() {
    return(
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}
      />
    );
  }

Github下载地址

ListView作为开发中常见的控件, 需要经常使用, 熟练掌握吧.

OK, Enjoy it!