UITableView表格的创建(React Native)
by 伍雪颖
'use strict'; var React = require('react-native'); var { Image,ListView,StyleSheet,Text,View,} = React; var SampleApp = React.createClass({ getInitialState: function() { var ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}); return { dataSource: ds.cloneWithRows(this._genRows({})),}; },render: function() { return ( <ListView dataSource={this.state.dataSource} renderRow={this._renderRow} /> ); },_renderRow: function(rowData: string,sectionID: number,rowID: number) { var imgSource = { uri: 'http://img.wdjimg.com/image/video/64d23dde9daac32367954b7c8a803da0_0_0.jpeg',}; return ( <View> <View style={styles.row}> <Image style={styles.thumb} source={imgSource} /> <Text style={styles.text}> {rowData} </Text> </View> <View style={styles.separator} /> </View> ); },_genRows: function(pressData: {[key: number]: boolean}): Array<string> { var dataBlob = []; for (var ii = 0; ii < 10; ii++) { dataBlob.push('Row ' + ii); } return dataBlob; },}); var styles = StyleSheet.create({ row: { flexDirection: 'row',justifyContent: 'center',padding: 10,backgroundColor: '#F6F6F6',},separator: { height: 1,backgroundColor: '#CCCCCC',thumb: { width: 64,height: 64,text: { flex: 1,}); React.AppRegistry.registerComponent('SampleApp',function() { return SampleApp });