RN实现ListView

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

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