React-Native基础_5.列表视图ListView 网络数据展示

//获取网络数据 并用列表展示 豆瓣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

-----------------------------期待大神们的到来

------------------------一---起分享，一起进步！需要你们

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!