专栏首页刘晓杰RN实现ListView

RN实现ListView

(1)实现单个item

import React, {Component, PropTypes} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Platform,
    Image
} from 'react-native';

const {width, height} = Dimensions.get('window');

export default class GDHotCell extends Component {

    static propTypes = {
        image: PropTypes.string,
        title: PropTypes.string,
    };

    //RawText " " must be wrapped in an explicit <Text> component

    render() {
        return (
            <View style={styles.container}>
                <Image source={{uri: this.props.image}} style={styles.icon}/>
                <View>
                    <Text numberOfLines={3} style={styles.txt}>{this.props.title}</Text>
                </View>
                <Image source={{uri: 'icon_cell_rightarrow'}} style={styles.arrow}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: 'white',
        width: width,
        height: 100,
        borderBottomWidth: 0.5,
        borderBottomColor: 'gray',
        marginLeft: 15,
    },
    icon: {
        width: 70,
        height: 70,
    }
    ,
    arrow: {
        width: 10,
        height: 10,
        marginRight: 30,
    }
    ,
    txt: {
        width: width * 0.6,
    }
    ,
});

(2)生成整个listview

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    ListView,
    Dimensions
} from 'react-native';

import NavBar from '../main/GDNavBar';
import Cell from '../main/GDHotCell';

const {width, height} = Dimensions.get('window');

export default class GDHalfHourHot extends Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
        };
        this.fetchData = this.fetchData.bind(this);
    }

    fetchData() {
        fetch('http://guangdiu.com/api/gethots.php')
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                        dataSource: this.state.dataSource.cloneWithRows(responseData.data)
                    }
                );
            }).done();
    };

    renderRow(rowData) {
        return (
            <Cell
                image={rowData.image}
                title={rowData.title}
            />
        );
    };

    componentDidMount() {
        this.fetchData();
    };

    render() {
        return (
            <View style={styles.container}>
                <ListView
                    dataSource={this.state.dataSource}//加载数据
                    renderRow={this.renderRow}
                    showHorizontalScrollIndicator={false}
                    style={styles.listviewStyle}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'white',
    },
    listviewStyle: {
        width: width
    }
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android取得长宽的问题

    今天在重写View时遇到一个问题,在构造函数中使用getWidth()时为0,而在onDraw函数中却可以取到值。一番搜索后终于知道了原因:

    提莫队长
  • Java注解详解

    在研究了butterknife以后,感觉有必要深入研究一下注解(其实还有好多地方用到过,比如retrofit.以后准备研究的dagger2也用到了注解)

    提莫队长
  • Dagger基础:Java依赖注入标准(javax.inject)介绍

    有这个注解的类包含了一个可注入的构造函数和管理injector如何重新使用这个实例 如果没有这个注解,injector生成并使用一次,然后就丢弃 有了这个注...

    提莫队长
  • react native仿微信PopupWindow效果

    在原生APP开发中,相信很多开发者都会见到这种场景:点击右上角更多的选项,弹出一个更多界面供用户选择。这种控件在原生开发中Android可以用PopupWind...

    xiangzhihong
  • 开发小程序没那么难,看完这5个套路你就全懂了

    你或许听说过,快速入门就是要学最小必要知识。而我最近在看微信小程序的官方教程时发现,这个教程虽然简单,但对于微信小程序开发来说,80%的套路都能从这里学习到,你...

    BestSDK
  • Dubbo剖析-服务提供方实现类到Invoker的转换

    前面dubbo整体架构分析里面我们讲解了服务提供者暴露一个服务的详细过程是,首先具体服务的实现类转换为了Invoker对象,然后Invoker在转换为Expor...

    加多
  • ThinkPHP3.2中英文切换!

    最近公司项目版本升级,小梦已经忙成了狗,无暇顾及文章,今天抽时间写一篇助助兴!

    思梦php
  • 2014年中国IT支出预期将逾2.1万亿元

    Gartner公司发布最新预测,随着全球经济出现逐步复苏的迹象,2014年全球IT支出将稳步增长至3.8万亿美元,与2013年相比增长3.2%。 Gar...

    静一
  • ThinkPHP3.2中英文切换!

    最近公司项目版本升级,小梦已经忙成了狗,无暇顾及文章,今天抽时间写一篇助助兴!

    思梦php
  • Qt读取UTF8与GBK格式文件乱码问题

    Qt君

扫码关注云+社区

领取腾讯云代金券