1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
| var React = require('react-native');
var { AppRegistry, Image, ListView, StyleSheet, Text, View, NavigatorIOS, ScrollView, Navigator } = React;
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
var Movies = React.createClass({ getInitialState:function(){ return { dataSource:new ListView.DataSource({ rowHasChanged:(row1, row2) => row1 != row2 }), loaded:false } }, componentDidMount:function(){ this.fetchData(); }, fetchData:function(){ fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource:this.state.dataSource.cloneWithRows(responseData.movies), loaded:true }); }) .done() }, renderLoadingView:function(){ return ( <View style={styles.container}> <Text> Loading Views </Text> </View> ); }, renderMovie:function(movie){ return ( <View style={styles.container} key={movie.id}> <Image source={{uri:movie.posters.thumbnail}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title} numberOfLines={1}> {movie.title} </Text> <Text style={styles.year}> {movie.year} </Text> </View> <View style={styles.separator}></View> </View> ); }, render: function() { if(!this.state.loaded){ return this.renderLoadingView(); }
return ( <ListView dataSource={this.state.dataSource} renderRow={this.renderMovie} style={styles.listView} /> ); } });
var styles = StyleSheet.create({ separator: { height: 1, backgroundColor: '#CCCCCC', }, listView:{ marginTop:65, }, container: { flex: 1, }, thumbnail: { width: 53, height: 81, }, rightContainer:{ flex:1, position:'absolute', top:0, left:55 }, title:{ fontSize:20, marginBottom:8, textAlign:'left', width:260 }, year:{ textAlign:'center' } });
module.exports = Movies;
|