ListView的一个小栗子：
例子内容部分参考地址：http://www.jb51.cc/article/p-cptgfkam-re.html
工程目录机构：

新建一个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集中字',//演员
            pic:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1646612829,79869058&fm=116&gp=0.jpg',//影片名称
            title:'第3集中字',//影片名称
            title:'第4集中字',//演员
            pic:'http://img.y3600.com/d/file/p/2016/08/24/b216e94526fbf2d49f40dc5aaa1897a4.jpg',//影片名称
            title:'第5集中字',//详情链接
        }
        ];
        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,color:'black',marginTop:8,marginBottom:5,actor:{
        fontSize:10,color:'#707070',listview:{
        backgroundColor:'#f5fcff',});

调用：

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

效果图：