UITableView表格的创建(React Native)
发布时间:2020-12-15 04:52:23 所属栏目:百科 来源:网络整理
导读: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.Data
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 });
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
