React-Native改變FB官網實例

/**

• 官網例子
• 改變成es6寫法 */ 'use strict'; import React, { AppRegistry, Component, Image, StyleSheet, Text, View, ListView } from 'react-native';

var MOCKED_MOVIES_DATA = [ {title: '咱們奔跑吧', year: '2016', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}} ];

var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

class nativeProject extends Component {

constructor(props){
    super(props);
    this.state = {
        movies: null,
        dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        }),
        loaded: false,
    };
}

componentDidMount() {
    this.fetchData();
    console.log(this.fetchData());
}

fetchData() {
    fetch(REQUEST_URL)
        .then((response) => response.json())
        .then((responseData) => {
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
                loaded: true,
            });
        })
        .done();
}

renderLoadingView() {
    return (
        <View style={styles.container}>
            <Text>
                正在加載電影數據……
            </Text>
        </View>
    );
}

renderMovie(movie) {
    return (

        <View style={styles.container}>
            <Image
                source={{uri: movie.posters.thumbnail}}
                style={styles.thumbnail}
            />
            <View style={styles.rightContainer}>
                <Text style={styles.title}>{movie.title}</Text>
                <Text style={styles.year}>{movie.year}</Text>
            </View>
        </View>
    );
}

render() {
    if(!this.state.loaded) {
        return this.renderLoadingView();
    }
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderMovie}
            style={styles.listView}
        />
    );
}

}

const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, rightContainer: { flex: 1, //backgroundColor:'red', }, thumbnail: { width: 53, height: 81, }, title: { fontSize: 20, marginBottom: 8, textAlign: 'center', }, year: { textAlign: 'center', }, });

AppRegistry.registerComponent('nativeProject', () => nativeProject);