React Native从零开始（八）ListView网络获取数据（Fetch）显示

先上效果图：

一、思路

实现这个效果，我们需要了解ListView的实现和Fetch的实现方法，并将其结合，这两个知识点在前两篇博客中已经有写到，其实没有什么难点，也可以加上页面等待时的一个效果，在数据未加载完成时我们可以显示Text，提示正在下载

二、实现

1、我们需要设置State来存储数据的状态，在未下载完成时为false完成时则设置成true

    constructor(props){        super(props);        var ds = new ListView.DataSource({           rowHasChanged:(oldRow,newRow) => oldRow!==newRow        });        this.state = {            /*1设置初始值*/            loaded: false,            dataSource:ds        };    }

这个时候创建一个DataSource来判断这两行是否相同，就是是否发生变化，决定渲染哪些行组件，避免全部渲染，提高渲染效率。

2、创建一个方法来实现数据的下载

  //下载数据    getData() {    fetch(REQUEST_URL)        .then((response) => {            return response.json();        })        .then((responseData) => {            this.setState({                loaded:true,                dataSource:this.state.dataSource.cloneWithRows(responseData.movies)            });        })}

这里第二个then的话是数据下载成功，我们将state的值重新赋值，然后将下载的数据克隆，是的dataSource不使用原数据。

3、使用componentDidMount方法来执行数据的下载，这个方法是在组件挂载后开始执行的

    //组件挂载完成后执行的方法    componentDidMount(){        //组件挂载后开始下载数据        this.getData();    }

4、渲染ListView的头部、行、和分割线

//渲染行组件function _renderRow(movie){    return(        <View style={styles.row}>            <Image                style={styles.thumbnail}                source={{uri:movie.posters.thumbnail}}/>            <View >                <Text >{movie.title}</Text>                <Text >{movie.year}</Text>            </View>        </View>    );}//渲染头部function _renderHeader(){    return(        <View >            <Text >Movies List</Text>            <View ></View>        </View>    );}//渲染分割线function _renderSeparator(sectionId,rowId){    return(        <View            style={styles.separator}            key={sectionId+rowId}></View>    );}

5、根据state的不同的值来渲染不同的控件

    render(){        /*2如果未请求到数据提示等待加载，如果请求到数据显示         * */        //加载前        if(!this.state.loaded){            return LoadingView();        }        //加载后        return (            <ListView                style={styles.listView}                dataSource={this.state.dataSource}                renderRow={_renderRow}                renderHeader={_renderHeader}                renderSeparator={_renderSeparator}                initialListSize={10}            />        );    }

6、在index页面调用这个控件就好

var MyListView = require("./MyView/MyListView");export default class MovieListView extends Component {  render() {    return (      <MyListView/>    );  }}

三、最后附上所有代码

MyListView.js

/** * Created by 11158 on 2017-01-17. */import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image,    ListView} from 'react-native';var REQUEST_URL = "https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json";/*    逻辑：未获取数据时，显示等待页面；获得数据时，显示电影列表页面    需要用到state的属性，用于记录下载状态* *///未下载完数据显示的页面function LoadingView() {    return (        <View style={styles.loadingContainer}>            <Text style={styles.loadingText}>Loading Movies......</Text>        </View>    );}//渲染行组件function _renderRow(movie){    return(        <View style={styles.row}>            <Image                style={styles.thumbnail}                source={{uri:movie.posters.thumbnail}}/>            <View >                <Text >{movie.title}</Text>                <Text >{movie.year}</Text>            </View>        </View>    );}//渲染头部function _renderHeader(){    return(        <View >            <Text >Movies List</Text>            <View ></View>        </View>    );}//渲染分割线function _renderSeparator(sectionId,rowId){    return(        <View            style={styles.separator}            key={sectionId+rowId}></View>    );}class MyListView extends Component{    constructor(props){        super(props);        var ds = new ListView.DataSource({           rowHasChanged:(oldRow,newRow) => oldRow!==newRow        });        this.state = {            /*1设置初始值*/            loaded: false,            dataSource:ds        };    }    //组件挂载完成后执行的方法    componentDidMount(){        //组件挂载后开始下载数据        this.getData();    }    //下载数据    getData() {    fetch(REQUEST_URL)        .then((response) => {            return response.json();        })        .then((responseData) => {            this.setState({                loaded:true,                dataSource:this.state.dataSource.cloneWithRows(responseData.movies)            });        })}    render(){        /*2如果未请求到数据提示等待加载，如果请求到数据显示         * */        //加载前        if(!this.state.loaded){            return LoadingView();        }        //加载后        return (            <ListView                style={styles.listView}                dataSource={this.state.dataSource}                renderRow={_renderRow}                renderHeader={_renderHeader}                renderSeparator={_renderSeparator}                initialListSize={10}            />        );    }}const styles = StyleSheet.create({    //loading样式    loadingContainer:{        flex:1,        marginTop:25,        backgroundColor:"cyan",        justifyContent:"center",        alignItems:"center"    },    loadingText:{        fontSize:30,        fontWeight:"bold",        textAlign:"center",        marginLeft:10        ,marginRight:10    },    //行样式    row:{        flexDirection:"row",        padding:5,        alignItems:"center",        backgroundColor:"#F5FCFF"    },    //图片样式    thumbnail:{        width:53,        height:81,        backgroundColor:"gray"    },    //分割线样式    separator:{        height:1,        backgroundColor:"black"    },    listView:{        marginTop:25,        backgroundColor:"#F5FCFF"    },});module.exports = MyListView;

index.android.js

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';var MyListView = require("./MyView/MyListView");export default class MovieListView extends Component {  render() {    return (      <MyListView/>    );  }}const styles = StyleSheet.create({});AppRegistry.registerComponent('MovieListView', () => MovieListView);

大家可以加好友交流学习

QQ：1115856293

微信：