React Native 网络获取数据后，listView显示数据

用fetch（）的方法获取网络数据，ListView来显示数据。

完整Demo：

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

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

const styles = StyleSheet.create({ container: { flex:1, flexDirection:'row', justifyContent:'center', alignItems:'center', backgroundColor:'#F5FCFF' }, thunbnail:{ width:100, height:80, }, });
class TestURL extends Component{
constructor(props) {
super(props)

this.state={

dataSource:null
}
}

render() {
if (!this.state.dataSource) {
return this.renderLoadingView();
}
return this.renderMovie();
}

fetchData() {
var myRequest = new Request(REQUEST_URL);
myRequest.method='GET';
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
fetch(myRequest).then((response) => response.json())
.then((responseData) => this.setState({dataSource:ds.cloneWithRows(responseData.movies)}))
.catch((error) => {console.log(error)})
}

componentDidMount() {
this.fetchData();
}

renderLoadingView() { return( <View style={styles.container}> <Text > loading... </Text> </View> ); }
renderMovie() {
return(
<ListView
dataSource={this.state.dataSource}
renderRow={(movie)=>this._renderRow(movie)}
/>

)
}

_renderRow(movie) {
return (
<View style={{flexDirection:'row'}}>
<Image source={{uri:movie.posters.thumbnail}} style={styles.thunbnail}/>
<Text>{movie.title}</Text>
</View>
)
}

}

AppRegistry.registerComponent('Demo', ()=>TestURL);

下面进行详细介绍：
1. 定义样式：

 

const styles = StyleSheet.create({
container: {
flex:1,
flexDirection:'row',
justifyContent:'center',
alignItems:'center',
backgroundColor:'#F5FCFF'
},
thunbnail:{
width:100,
height:80,
},

});

2. 数据加载完成前后UI的渲染：

render() {
if (!this.state.dataSource) {
return this.renderLoadingView();
}
return this.renderMovie();
}

如果listview的DataSource是null的话，会加载loading的动画，如果不为空的话，就会显示Listview

3.显示loading...的UI

renderLoadingView() {
return(
<View style={styles.container}>
<Text >
loading...
</Text>
</View>
);
}

4.加载完数据后，显示ListView的代码：

renderMovie() {
return(
<ListView
dataSource={this.state.dataSource}
renderRow={(movie)=>this._renderRow(movie)}
/>

)
}

_renderRow(movie) {
return (
<View style={{flexDirection:'row'}}>
<Image source={{uri:movie.posters.thumbnail}} style={styles.thunbnail}/>
<Text>{movie.title}</Text>
</View>
)
}

}

UI效果：