import React, { Component } from ‘react‘;
import {
    Platform,
    StyleSheet,
    Text,
    View,
    ListView

} from ‘react-native‘;

//從文件中讀取數據
var movieData = require("./data.json");
//獲取所有movies數據,屬性movies是一個數組
var movies = movieData.movies;


var MovieList = React.createClass({

    getInitialState:function () {
        //創建dataSource對象
        var ds = new ListView.DataSource({
            rowHasChanged:(oleRow,newRow) => oleRow!==newRow
        });
        return{
             dataSource : ds.cloneWithRows(movies)
        }
    },
    //渲染行組件
    _renderRow:function (movie) {
        return(
            <View style={styles.row}>
                <Image
                    style={styles.thumbnail}
                source={{uri:movie.posters.thumbnail}}//圖像的鏈接
                />
                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{movie.title}</Text>
                    <Text style={styles.year}>{movie.year}</Text>
                </View>
            </View>
        )
    },
    //渲染頭部
    _renderHeader:function () {
        return(
            <View style={styles.header}>
                <Text style={styles.headerText}>Movies List</Text>
                <View style={styles.separator}></View>
            </View>
        )

    },
    //渲染分割線
    _renderSepatator:function (sectionID:number,rowID:number) {
        return(
            //view作為分割線
            <View style={styles.separator} key={sectionID+rowID}></View>
        )
    },

    render:function () {
        return(
            <ListView
                style={styles.listView}
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
            renderHeader={this._renderHeader}
            renderSeparator={this._renderSepatator}
            initialListSize={10}   //開始時 渲染多少行
            />

        )
    }
});

var styles = StyleSheet.create({

    listView:{
        marginTop:25,
        flex:1,
        backgroundColor:"#F5FCFF"
    },
    //行組件樣式
    row:{
        flexDirection:"row",
        padding:5,
        alignItems:"center",
        backgroundColor:"#F5FCFF"
    },
    thumbnail:{
        width:53,
        height:81,
        backgrounColor:"gray"
    },
    rightContainer:{
        marginLeft:10,
        flex:1,
    },
    title:{
        fontSize:18,
        marginTop:3,
        marginBottom:3,
        textAlign:"center",
    },
    year:{
        marginBottom:3,
        textAlign:"center",
    },
    //header組件樣式
    header:{
        height:50,
        backgroundColor:"#F5FCFF"
    },
    headerText:{
        flex:1,
        fontSize:20,
        fontWidth:"bold",
        textAlign:"center",
        lineHeight:44
    },
    //分割線組件樣式
    separator:{
        height:1,
        backgrounColor:"CCCCCC"

    }


});

ListView-電影列表