//获取网络数据 并用列表展示 豆瓣Top250 api /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ 'use strict' import React,{Component} from 'react'; import { AppRegistry,StyleSheet,Text,Image,View,ListView,} from 'react-native'; //import {AppRegistry,} from 'react-native'; //import Day0718 from './componets/Home' let REQUEST_URL = 'https://api.douban.com/v2/movie/top250'; export default class Day0718 extends Component { constructor(props) { super(props); this.state = { dataSource:new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}),loaded: false,}; } componentDidMount(){ this._fetchData(); } _fetchData(){ fetch(REQUEST_URL) .then(response => response.json()) .then(responseData =>{ this.setState({ movies:this.state.dataSource.cloneWithRows(responseData.subjects),loaded: true,}); }) .done(); } render() { if(!this.state.loaded){ return this._renderLoadingView(); } return ( <View style={styles.Container}> <ListView dataSource={this.state.movies} renderRow={this._renderMovieList} style={styles.listView} /> </View> ); } _renderMovieList(movie){ return( <View style = {styles.item}> <View style = {styles.itemImage}> <Image style ={styles.image} source ={{uri:movie.images.large}}/> </View> <View style = {styles.itemContent}> <Text style ={styles.itemHeader}>{movie.title}</Text> <Text style ={styles.itemMeta}>{movie.original_title}({movie.year})</Text> <Text style ={styles.redText}>{movie.rating.average}</Text> </View> </View> ); }; _renderLoadingView(){ return ( <View style ={styles.loading}> <Text > loading movies.....</Text> </View> ); }; } const styles = StyleSheet.create({ item:{ flexDirection:'row',borderBottomWidth:1,borderColor:'rgba(100,53,201,0.1)',paddingBottom:6,marginBottom:6,flex:1,},itemContent:{ flex:1,marginLeft:13,marginTop:6,itemHeader:{ fontSize:18,fontFamily:'Helvetica Neue',fontWeight:'300',color:'#6435c9',itemMeta:{ fontSize:16,color:'rgba(0,0.6)',redText:{ color:'#db2828',listView:{ paddingTop: 20,backgroundColor: '#F5FCFF',loading:{ flex:1,justifyContent:'center',alignItems:'center',overlay: { backgroundColor: 'rgba(0,0.3)',alignItems: 'center' },overlayHeader: { fontSize: 33,fontFamily: 'Helvetica Neue',fontWeight: '200',color: '#eae7ff',padding: 10 },overlaySubHeader: { fontSize: 16,padding: 10,paddingTop: 0,backImage: { // alignItems:'center',flex: 1,//justifyContent:'center',resizeMode: 'cover',image: { height: 150,width: 100,justifyContent: 'center',itemOne: { // alignSelf:'flex-start',itemTwo: { //alignSelf:'center',itemThree: { flex: 2,itemText: { fontSize: 33,color: '#6435c9',padding: 30,Container: { //alignItems:'flex-start',// flex-start 靠在左边显示 center 居中 flex-end 尾部 // flexDirection: 'column',//row column 方向 backgroundColor: '#eae7ff',//center ; 居中 flex-end 位于底部 space-between/space-around屏幕平均分配 },Text: { color: '#6435c9',fontSize: 26,textAlign: 'center',fontStyle: 'italic',letterSpacing: 2,lineHeight: 33,fontWeight: '300',textDecorationLine: 'underline',textDecorationStyle: 'dashed',}); class ComText extends React.Component { render() { return ( <Text style={styles.itemText}> {this.props.children} </Text> ); } } AppRegistry.registerComponent('Day0718',() => Day0718);
请求豆瓣Top250数据,解析到ListView上展示
---------------欢迎各位大神加群
----------------Android交流群:230274309
-----------------------------期待大神们的到来
------------------------一---起分享,一起进步!需要你们
原文链接:https://www.f2er.com/react/303379.html