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;
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

ReactNative列表ListView

ListView dataSource renderRow ListView的点击 ListView在android中,如果我们需要显示一个ListView,有两项是比不可少的,首先是ListView...

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

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

react native组件学习之listview

ListView是reacct native的一个重要组件,类似于android中的listview和recyclerview,react native中ListView的基本使用步骤如下: 创建一个...

React-native ListView不滚动

发现ListView里的数据,即使溢出了屏幕,也还是不滚动,查了资料,发现contentContainerStyle这个样式里,不能设置flex: 1 ,否则不会滚动。 参见: http://st...

React Native填坑之旅--ListView篇

列表显示数据,基本什么应用都是必须。今天就来从浅到深的看看React Native的ListView怎么使用。笔者写作的时候RN版本是0.34。最简单的//@flowimport React from...

React-Native ListView

转自:http://www.jianshu.com/p/f39f75cf3e38 我的React-Native不得不说的一些事情-5 ListView 作用 ListView在APP的作...

React-Native 填坑之ListView(item更新)

一 背景效果图如下: 我的目的是实现单选item,正常情况设置一个state变量来保存选中的Index,在每次点击item的时候改变index就OK!但是,我想的太天真了。this.setStat...

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

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

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

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

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

  • 2016年05月07日 12:02
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React-Native ListView简单使用
举报原因:
原因补充:

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