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!