React Native实例--->电影列表（官方）

该例子是练习官方的一个非常简单的例子，初学者可以看看，非初学者就不要往下看了，省的浪费你的时间。

实例代码：

import React, {Component} from 'react'

import {
    StyleSheet,
    Text,
    View,
    Image,
    FlatList,

} from 'react-native'

var MOCKED_MOVIES_DATA = [{
    title:"标题",
    year:"2015",
    posters:{thumbnail:"http://i.imgur.com/UePbdph.jpg"}
}];
var REQUEST_URL = "https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json";
export default class FetchExample extends Component {
    static navigationOptions = {
        title: '网络请求',
    };


    constructor(props){
        super(props);
        this.state = {//这里放你自己定义的state变量以及初始值
            data:[],
            loaded:false,
        };
        //在ES6中，如果在自定义的函数里使用了this关键字，则需要对其进行“绑定”操作，否则this的指向会边为空
        //像下面这行代码一样，在constructor中使用bind是其中一种做法（还有一些其他做法，如使用箭头函数等）
        this.fetchData = this.fetchData.bind(this);
    }

    //该方法是React组件的一个生命周期方法，它会在组件刚加载完成的时候调用一次，以后不会再被调用。
    componentDidMount(){
        this.fetchData();
    }
    fetchData(){
        fetch(REQUEST_URL)
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    loaded:true,
                    data:this.state.data.concat(responseData.movies),
                });
        });
    }

    render(){
        if (!this.state.loaded) {
            return this.renderLoadingView();
        }
        return (
            <FlatList renderItem={this.renderMovie} data={this.state.data} style={styles.list}/>
        );
    }

    renderLoadingView(){
        return(
            <View style={styles.container}>
                <Text>正在加载电影数据...</Text>
            </View>
        )
    }

    renderMovie({item}){
        return (
            <View style={styles.container}>
                <Image style={styles.thumbnail} source={{uri:item.posters.thumbnail}}/>
                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{item.title}</Text>
                    <Text style={styles.year}>{item.year}</Text>
                </View>
            </View>
        )
    }
}


var styles = StyleSheet.create({
    container:{
        flex: 1,
        flexDirection:'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#f5fcff',
        marginBottom: 10,
    },
    thumbnail: {
        width:53,
        height:81
    },
    rightContainer:{
        flex: 1,
    },
    title:{
        fontSize:20,
        marginBottom: 8,
        textAlign: 'center'
    },
    year:{
        textAlign: 'center'
    },
    list:{
        paddingTop: 20,
        backgroundColor: "#f5fcff"
    }
})

上面代码中有些重要的部分注释已经写的很清楚了，如果还有什么不明白的，大家可以留言，互相探讨。

效果图：

有些图片没加载出来是因为是gif图片。