react-native 网络获取数据后ListView数据填充

今天写了个小demo，从网络请求获取后台的数据，在Listview 展示数据。

我们来看看这个简单的demo界面效果：

简单粗暴的直接上代码吧！

import React, {Component} from 'react';
import {
  StyleSheet,
  ListView,
  Text,
  View,
  Image,
  ActivityIndicator,
} from 'react-native';


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myList: null,
      animating: true,
    }
  }

  render() {
    if (!this.state.myList) { // myList为空的时候显示加载组件，有数据则展示数据
      return (
        <View>
          <ActivityIndicator
            animating={this.state.animating}
            style={[styles.centering, {height: 80}]}
            size="large"
          />
        </View>
      );
    } else {
      return (
        <View style={styles.listStyle}>
          <ListView
            dataSource={this.state.myList}
            renderRow={(rowData) => this.renderRow(rowData)}
          />
        </View>
      )
    }
  }

  // 在render 之后执行
  componentDidMount() {
    this.getMovies();
  }

  /**
   *  ListView数据填充
   * @param rowData
   * @returns {*}
   */
  renderRow(rowData) {
    return (
      <View style={styles.outer}>
        <Image source={require('./img/photo.png')} style={styles.img}/>
        <View style={styles.content}>
          <Text>电影： {rowData.title}</Text>
          <Text>上映时间: {rowData.releaseYear}</Text>
        </View>
      </View>
    )
  }


  getMovies() {
    fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())//
      .then((responseJson) => {
        console.log(responseJson.movies.title);
        this.setState(
          {
            myList: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(responseJson.movies),
          }
        )
      })
      .catch((error) => {
        console.error(error);
      });
  }
}

const styles = StyleSheet.create({
  outer: {
    flexDirection: 'row',
    marginTop: 15,
  },
  listStyle: {
    flex: 1,
    paddingTop: 25,
    paddingLeft: 20
  },
  img: {
    width: 75,
    height: 80,
  },
  content: {
    flex: 3,
    marginLeft: 10,
    marginTop: 20
  },
  centering: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 8,
  },
});

图片用的是本地的，需要在项目根文件夹中创建‘img’文件夹，里面photo的图片就是demo中的图片。