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

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();
}

bc88
//加载后
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
微信：