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 条评论
登录 后参与评论

相关文章

来自专栏wOw的Android小站

[iOS] 小问题记录

iOS 往数据库里写保存文件路径的时候,不要写全路径,因为软件更新或者重新安装沙盒路径会变

1102
来自专栏Guangdong Qi

Masonry 布局tag标签(4343排列)

1544
来自专栏c#开发者

IOS5开发-http get/post调用mvc4 webapi互操作(图片上传)

目前最流行的跨平台交互是采用http协议通过JSON对象进行互操作。这种方式最简单,也很高效。webservice+xml的方式似乎已经过时。 下面是我做的一个...

6325
来自专栏Alice

ios 富文本 加颜色 删除线

1254
来自专栏ios 技术积累

Objective-C UIButton 自定义图片位置

在项目中经常会遇到一个按钮上放一个图片 位置有可能会是在标题的上,下,左,右 如果一个按钮,可以单独设置titleEdgeInsets和imageEdgeIn...

2003
来自专栏coding...

iOS开发-RAC+MVVM练手项目 图床App写在前面准备工作界面设计首页历史关于后记

前段时间闲着无聊和盆友就搞了个图床站Chevereto-Free,忽然发现居然有API提供,而且很简单,只需要一个KEY就可以

1162
来自专栏hrscy

iOS百度地图开发之路径规划

3903
来自专栏DannyHoo的专栏

底牌项目中设置论坛中各个模块头图的代码

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1013
来自专栏前端儿

Web 前端颜色值--字体--使用,整理整理

颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 2...

4452
来自专栏ios 技术积累

ios 圆形进度条

有很多开源的进度条不用,非要弄这种效果,就不吐槽了,还是想想怎么实现 废话就不多说了 直接上代码

2534

扫码关注云+社区

领取腾讯云代金券