加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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 });

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读