React native ListView初识

ListView的一个小栗子：
例子内容部分参考地址：http://blog.csdn.net/it_talk/article/details/52326397
工程目录机构：

新建一个DramaComponent.js自定义一个公共组件

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

} from 'react-native';
// 导入Dimensions库
var Dimensions = require('Dimensions');

export default class DramaComponent extends Component{
    constructor(props){
        super(props);
         this.state = {
            movies:new ListView.DataSource({
                rowHasChanged:(r1,r2) => r1!=r2,
            }),
        }
    }
    //组件的生命周期函数
    componentDidMount(){
        var datas = [{
            name:'原来是美男啊',//影片名称
            title:'第1集中字',//标题
            actor:'xx',//演员
            pic:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1940296251,2372471969&fm=116&gp=0.jpg',//图片地址
            url:'http://www.y3600.com/hanju/2016/907.html',//详情链接
        },{
            name:'原来是美男啊',//影片名称
            title:'第2集中字',//标题
            actor:'xx',//演员
            pic:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1646612829,79869058&fm=116&gp=0.jpg',//图片地址
            url:'http://www.y3600.com/hanju/2016/907.html',//详情链接
        },{
            name:'原来是美男啊',//影片名称
            title:'第3集中字',//标题
            actor:'xx',//演员
            pic:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1940296251,2372471969&fm=116&gp=0.jpg',//图片地址
            url:'http://www.y3600.com/hanju/2016/907.html',//详情链接
        },{
            name:'原来是美男啊',//影片名称
            title:'第4集中字',//标题
            actor:'xx',//演员
            pic:'http://img.y3600.com/d/file/p/2016/08/24/b216e94526fbf2d49f40dc5aaa1897a4.jpg',//图片地址
            url:'http://www.y3600.com/hanju/2016/907.html',//详情链接
        },{
            name:'原来是美男啊',//影片名称
            title:'第5集中字',//标题
            actor:'xx',//演员
            pic:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1940296251,2372471969&fm=116&gp=0.jpg',//图片地址
            url:'http://www.y3600.com/hanju/2016/907.html',//详情链接
        }
        ];
        this.setState({
            movies:this.state.movies.cloneWithRows(datas),
        });
    }

    //渲染ListView item view
    _renderMovieView(movie){
       return(
            <View style={styles.row} key={movie.url}>
                <TouchableOpacity onPress={this._onItemPress.bind(this,movie)} activeOpacity={0.8} >
                    <View>
                        <Image source={{uri:movie.pic}} style={styles.thumbnail}>
                            <Text style={styles.title}>{movie.title}</Text>
                        </Image>
                        <Text numberOfLines={1} style={styles.name}>{movie.name}</Text>
                        <Text numberOfLines={1} style={styles.actor}>{movie.actor}</Text>
                    </View>
                </TouchableOpacity>
       </View>);
    }
    //ListView 拉到底部时调用
    _onEndReached(){

    }

    //item 点击事件
    _onItemPress(movie){
        console.log(movie);
    }

    render(){
        return(
            <ListView
                dataSource = {this.state.movies}
                renderRow = {this._renderMovieView.bind(this)}
                style = {styles.listview}
                initialListSize = {10}
                pageSize = {10}
                onEndReachedThreshold = {5}
                onEndReached = {this._onEndReached.bind(this)}
                enableEmptySections = {true}
                contentContainerStyle = {styles.grid}
            />
        );
    }
}

//样式
const WIN_WIDTH = Dimensions.get('window').width;
var width = WIN_WIDTH/3;
var styles = StyleSheet.create({
    grid:{
        justifyContent: 'flex-start',
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginTop:10
    },
    row:{
        height:140,
        width:width,
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
        paddingTop:10,
        marginTop:5,
    },
    thumbnail:{
        flex:1,
        width:width-20,
        height:80,
        justifyContent:'flex-end',
        resizeMode: Image.resizeMode.strech,
    },
    title:{
        fontSize:10,
        textAlign:'center',
        color:'white',
        backgroundColor:'#27272790',
    },
    name:{
        fontSize:12,
        width:width-20,
        color:'black',
        marginTop:8,
        marginBottom:5,
        textAlign:'center',
    },
    actor:{
        fontSize:10,
        color:'#707070',
        width:width-20,
        textAlign:'center',
    },
    listview:{
        backgroundColor:'#f5fcff',
    },
});

调用：

import DramaComponent from './js/component/DramaComponent'
<View style={styles.container}>
         <DramaComponent />
       </View>

效果图：