React native学习第十章:ListView

ListView - 一个核心组件，用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个ListView组件，并且定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为listview的每一行）。等同于iOS的tableview

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
  AppRegistry,
  Image,
  ListView,
  TouchableHighlight,
  StyleSheet,
  RecyclerViewBackedScrollView,
  Text,
  View,
} = ReactNative;
const styles = StyleSheet.create({
row: {
  flexDirection: 'row',
  justifyContent: 'center',
  padding: 10,
  backgroundColor: '#F6F6F6',
},
text: {
  flex: 1,
},
seperator: {
  height: 1,
  backgroundColor: '#CCCCCC'
}
});
export default class DemoList extends React.Component {

  constructor(props){
         super(props);
         var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
         this.state = {
             dataSource: ds.cloneWithRows(this._genRows()),
         };
         this._renderRow = this._renderRow.bind(this);

     }

   _genRows(){
       const dataBlob = [];
       for(let i = 0 ; i< 200 ; i ++ ){
           dataBlob.push("aa"+i);
       }
       return dataBlob;
   }
  _renderRow(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
     return (
       <TouchableHighlight onPress={() => {
         this._pressRow(rowID);
         highlightRow(sectionID, rowID);
       }}>
         <View style={styles.row}>
           <Text style={styles.text}>{rowData}</Text>
         </View>
       </TouchableHighlight>
     );
   }
   _pressRow(rowID:number){
       alert("hellow"+rowID);
   }
  _renderSeparator(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
     return (
       <View key={`{sectionID}-${rowID}`}
         style={{height: 1, backgroundColor: 'black'}}>
       </View>
     );
   }
   render() {
     return (
       <ListView dataSource={this.state.dataSource}
         renderRow={this._renderRow}
         renderSeparator={this._renderSeparator}
         />
     );
   }

}
AppRegistry.registerComponent('TestListView', () => DemoList);

// module.exports = ListViewSimpleExample;

<ListView dataSource={this.state.dataSource}
         renderRow={this._renderRow}
         renderSeparator={this._renderSeparator}
         />

其中renderSeparator自定义下划线。renderRow相等于iOS的tableviewcell方法，这其中可以设置cell的样式以及行的点击方法

把cell独立出来

 

import React from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  StyleSheet
} from 'react-native';


export default class TestCell extends React.Component {
  render() {
    return (
      <View>
        <TouchableHighlight onPress={this.props.onSelect}>
          <View style={styles.row}>
            <Text style={styles.text}>{this.props.rowData}</Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
  text: {
    flex: 1,
  },
});

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
  AppRegistry,
  Image,
  ListView,
  TouchableHighlight,
  StyleSheet,
  RecyclerViewBackedScrollView,
  Text,
  View,
} = ReactNative;
const styles = StyleSheet.create({
row: {
  flexDirection: 'row',
  justifyContent: 'center',
  padding: 10,
  backgroundColor: '#F6F6F6',
},
text: {
  flex: 1,
},
seperator: {
  height: 1,
  backgroundColor: '#CCCCCC'
}
});
import TestCell from './TestCell'
export default class DemoList extends React.Component {

  constructor(props){
         super(props);
         var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
         this.state = {
             dataSource: ds.cloneWithRows(this._genRows()),
         };
         this._renderRow = this._renderRow.bind(this);

     }

   _genRows(){
       const dataBlob = [];
       for(let i = 0 ; i< 200 ; i ++ ){
           dataBlob.push("aa"+i);
       }
       return dataBlob;
   }
  _renderRow(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
     return (
      //  <TouchableHighlight onPress={() => {
      //    this._pressRow(rowID);
      //    highlightRow(sectionID, rowID);
      //  }}>
      //    <View style={styles.row}>
      //      <Text style={styles.text}>{rowData}</Text>
      //    </View>
      //  </TouchableHighlight>
      <TestCell onSelect={() => {
         this._pressRow(rowID);
         highlightRow(sectionID, rowID);
       }} rowData={rowData}/>
     );
   }
   _pressRow(rowID:number){
       alert("hellow"+rowID);
   }
  _renderSeparator(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
     return (
       <View key={`{sectionID}-${rowID}`}
         style={{height: 1, backgroundColor: 'black'}}>
       </View>
     );
   }
   render() {
     return (
       <ListView dataSource={this.state.dataSource}
         renderRow={this._renderRow}
         renderSeparator={this._renderSeparator}
         />
     );
   }

}
AppRegistry.registerComponent('TestListView', () => DemoList);

// module.exports = ListViewSimpleExample;