React-Native ListView简单使用

原创 2016年08月30日 18:24:19
/**
 * Created by Administrator on 2016/8/30.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
} from 'react-native';

class ListViewG extends Component {

    /**
     * 初始化数据
     * @param props
     */
    constructor(props) {
        super(props);
        //基本都是些固定写法
        //第一步
        var ds = new ListView.DataSource({rowHasChanged: ((r1, r2) => r1 !== r2)});
        this.state = {
            //数据源
            //第二步
            dataSource: ds.cloneWithRows([
                'Android', 'IOS', 'React-Native', 'H5', 'JAVA', 'OC', 'Go', 'Swift', 'C', 'C++', 'C#', 'Python', 'PHP'
            ])
        }
    }

    render() {
        return (
            <View style={{paddingTop: 20, flex: 1}}>

                <ListView
                    //第三步 设置数据源
                    dataSource={this.state.dataSource}
                    // 写法一
                    // renderRow={(rowData) => <Text style={{height: 150, fontSize: 20}}>测试数据{rowData}</Text>}
                    //写法二
                    //第四步渲染每行数据也就是对每行数据的布局样式
                    renderRow={this.renderRow}
                />
            </View>
        )
    }

    /**
     *
     * @param rowData       数据源
     * @param sectionID     组ID
     * @param rowID         行ID
     * @returns {XML}
     */
    renderRow(rowData, sectionID, rowID) {
        return (
            <Text style={styles.row}>测试数据{rowData + '\n组ID' + sectionID + '\n行ID' + rowID}
            </Text>
        )
    }

}

const styles = StyleSheet.create({
    row: {
        height: 80,
        fontSize: 20,
        //布局优化当写此属性时只会加载屏幕能看到数据
        overflow: 'hidden'
    }
});

module.exports = ListViewG;
版权声明:本文为博主原创文章,未经博主允许不得转载。

React Native从零开始(六)ListView的简单使用

React Native从零开始(六)ListView的简单使用 先来一张效果图: 一、首先是数据的准备 这里有一个链接我们可以在这里得到...
  • SuperBigLw
  • SuperBigLw
  • 2017年01月16日 10:42
  • 3354

【React Native开发】React Native控件之ListView组件讲解以及最齐全实例(19)

(一)前言       【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org                今天我们一起来...
  • jiangqq781931404
  • jiangqq781931404
  • 2016年02月04日 16:55
  • 25352

react native listView(1) 加载网络数据简单版

react native listview
  • fengcai0123
  • fengcai0123
  • 2017年01月10日 10:04
  • 1098

React-Native傻瓜式学习笔记(一):ListView的简单使用

最近国内外使用React-Native写APP的公司越来越多了,我们公司也不甘落后,将使用React-Native重写APP这个事提上了日程。然而这个任务落到我头上的时候,我本人作为一个Android...
  • angelseedex
  • angelseedex
  • 2016年12月09日 13:12
  • 603

react-native-vector-icons的简单使用

  • 2016年05月07日 12:02
  • 2KB
  • 下载

使用React-native实现的简单新闻列表及详情、评论功能

  • 2016年07月03日 13:03
  • 39.83MB
  • 下载

React-Native学习笔记 使用ListView加载网络数据

react-native学习笔记: 使用ListView加载网络数据
  • a1018875550
  • a1018875550
  • 2017年04月08日 18:42
  • 355

react-native listview使用

listview是我们应用中的一个组件,用它我们可以展示列表数据。react-native为我们提供了ListView组件,方便我们实现列表数据展示。1.引入ListView组件:import { ...
  • CSDN_GYG
  • CSDN_GYG
  • 2017年05月03日 16:53
  • 271

React Native 之 ListView使用

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所...
  • yeshaojian
  • yeshaojian
  • 2016年11月17日 19:08
  • 4171

React Native 学习笔记二十(关于ListView的使用)

完整讲解链接 使用三方封装的插件 完成 listView的下啦刷新  并添加网络请求  /** * Created by zhangyanjiao on 16/10/21. */ import ...
  • Youth_never_go_away
  • Youth_never_go_away
  • 2016年10月21日 15:11
  • 630
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React-Native ListView简单使用
举报原因:
原因补充:

(最多只允许输入30个字)