- //获取网络数据 并用列表展示 豆瓣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
-----------------------------期待大神们的到来
------------------------一---起分享,一起进步!需要你们