React Native第一个Demo(2)网络获取数据和ListView
2016-06-06 14:36
603 查看
继续上一篇React Native第一个Demo(1)
参考:http://facebook.github.io/react-native/docs/tutorial.html
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,
Image,
StyleSheet,
Text,
View,
ListView,
} 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, row2) => row1 !== row2,
}),
loaded: false,
};
}
componentDidMount(){
this.fetchData();
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
loaded: true,
});
})
.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,
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('DemoProject', () => DemoProject);
参考:http://facebook.github.io/react-native/docs/tutorial.html
相关文章推荐
- SVN使用MySQL验证用户名密码(HTTP)
- http 返回的状态值以及Tomcat webapp的管理
- 类似restful风格的网络请求框架
- LINUX 中的 TCP/IP协议 参数详解
- TCP洪水攻击(SYN Flood)的诊断和处理
- iOS模拟网络差
- Ghost windows7系统的连接网络的情况下网络连接图标为什么显示无网络访问
- HTTPS攻击
- delphi IdHTTP实现Get方法下载文件,断点续传
- 通过HttpListener实现简单的Http服务
- bzoj 1596: [Usaco2008 Jan]电话网络
- 如何让你的Apache支持https
- Java 基于Tcp/ip连接的多人交互聊天室(Socket编程)
- apache https ssl配置详细步骤讲解
- HTTP Live Streaming直播(iOS直播)技术分析与实现
- android http 通讯相关
- android 网络编程基础
- Android网络定位服务定制简述
- Caffe技巧之使用snapshot来继续网络训练
- 浅谈WebService SOAP、Restful、HTTP(post/get)请求