React Native第一个Demo2网络获取数据和ListView

继续上一篇React Native第一个Demo（1）

1、网络获取真实数据

1.1定义变量

把下面url变量放在index.ios.js顶部，通常是要放在 imports下面。

var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

1.2初始化

添加一些初始化，this.state.movies === null，这样我们可以判断movies数据是否被加载了。

constructor(props) { super(props); this.state = { movies: null,};
  }

1.3 fetchData()

在组件加载时，获取数据。数据返回时，回调设置state的movies为电影信息数据列表。

componentDidMount() {
    this.fetchData();
  }
fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json()) .then((responseData) => { this.setState({ movies: responseData.movies,}); }) .done(); }

1.4 loading的视图和渲染获取的数据

获取数据返回后，设置state，render被再次调用，这时this.state.movies不为null,调用renderMovie设置和展示数据到界面上。

 render() { if (!this.state.movies) { return this.renderLoadingView(); } var movie = this.state.movies[0]; return this.renderMovie(movie); } renderLoadingView() { return ( <View style={styles.container}> <Text> Loading movies... </Text> </View> ); } renderMovie(movie) { return ( <View style={styles.container}> <Image  source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title}>{movie.title}</Text> <Text style={styles.year}>{movie.year}</Text> </View> </View> ); }

2、ListView展示网络数据

为什么要用ListView不用scrollview或把数据直接显示出来呢？因为ListView只渲染展示部分的数据，效率高性能好。

2.1 增加ListView模块

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

2.2 修改构造器和render

增加dataSource变量和loaded，方便使用，避免this.state.movies两次存储。rowHasChanged是 react组件纪录 state 是否更新的一个方法，如果是等于，state变化页面不更新,不等于，如果state变化页面立即更新。

constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1,row2) => row1 !== row2,}),loaded: false,};
  }
 render() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie}
        style={styles.listView}
      />
    );
  }

2.3 fetchData&增加listview的rowstyle

fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData.movies),loaded: true,}); }) .done(); } //下面增加到stlyes里 listView: { paddingTop: 20,backgroundColor: '#F5FCFF',},

2.4 完整代码

import React,{
    Component,} from 'react';

import {
     AppRegistry,} from 'react-native';



 var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';


 class DemoProject extends Component
 {
     constructor(props) {
         super(props);
         this.state = {
             dataSource: new ListView.DataSource({
                 rowHasChanged: (row1,};
     }

     componentDidMount(){
         this.fetchData();
     }

     fetchData() {
         fetch(REQUEST_URL)
             .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData.movies),}); }) .done(); } render() { if (!this.state.loaded) { return this.renderLoadingView(); } return ( <ListView dataSource={this.state.dataSource} renderRow={this.renderMovie} style={styles.listView} /> ); } renderLoadingView() { return (<View style={styles.container} > <Text>Loading movies......</Text> </View> ); } renderMovie(movie) { return ( <View style={styles.container}> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title}>{movie.title}</Text> <Text style={styles.year}>{movie.year}</Text> </View> </View> ); } }; var styles = StyleSheet.create({ container: { flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',rightContainer: { flex: 1,title: { fontSize: 20,marginBottom: 8,textAlign: 'center',year: { textAlign: 'center',thumbnail: { width: 53,height: 81,listView: { paddingTop: 20,}); AppRegistry.registerComponent('DemoProject',() => DemoProject);

参考：http://facebook.github.io/react-native/docs/tutorial.html