react native 学习笔记----网络
2016-08-31 21:25
429 查看
React Native提供了和web标准一致的Fetch
API,用于满足开发者访问网络的需求。
要从任意地址获取内容的话,只需简单地将网址作为参数传递给fetch方法即可:
废话不多说,给个例子大家看看,详细看代码中的注释,
import React, { Component } from 'react';
import {
AppRegistry,
Image,ListView,
StyleSheet,
Text,
View
} from 'react-native';
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
class HttpTest extends Component {
constructor(props) {
super(props); //这一句不能省略,照抄即可
this.state = {
movies: null, //这里放你自己定义的state变量及初始值
};
// 在ES6中,如果在自定义的函数里使用了this关键字,则需要对其进行“绑定”操作,否则this的指向不对
// 像下面这行代码一样,在constructor中使用bind是其中一种做法(还有一些其他做法,如使用箭头函数等)
this.fetchData = this.fetchData.bind(this);
}
render() {
if (!this.state.movies) {
return this.renderLoadingView(); //刚开始网络数据没有拉取下来,先展示一个加载页面
}
var movie = this.state.movies[0];
return this.renderMovie(movie);
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
// 注意,这里使用了this关键字,为了保证this在调用时仍然指向当前组件,我们需要对其进行“绑定”操作
this.setState({ //调用setState,会触发调用render,重新渲染界面
movies: responseData.movies,
});
})
.done();
}
componentDidMount() {//React组件的一个生命周期方法,组件加载完后调用。
this.fetchData();
}
renderLoadingView() {
return (
<View style={styles.container}>
<Text>
正在加载电影数据……
</Text>
</View>
);
}
renderMovie(movie){
return (
<View style={styles.container}>
<Image source={{uri:movie.posters.thumbnail}}
style={styles.thumbnail}></Image>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year} </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail: {
width: 53,
height: 80,
},
rightContainer:{
flex:1,
},
title:{
fontSize:20,
marginBottom:8,
textAlign:'center',
},
year:{
textAlign:'center',
},
});
AppRegistry.registerComponent('HttpTest', () => HttpTest);
运行结果:
本例子节选于: react native综合小例子:“电影列表”。
API,用于满足开发者访问网络的需求。
发起网络请求
要从任意地址获取内容的话,只需简单地将网址作为参数传递给fetch方法即可:fetch('https://mywebsite.com/mydata.json')
废话不多说,给个例子大家看看,详细看代码中的注释,
import React, { Component } from 'react';
import {
AppRegistry,
Image,ListView,
StyleSheet,
Text,
View
} from 'react-native';
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
class HttpTest extends Component {
constructor(props) {
super(props); //这一句不能省略,照抄即可
this.state = {
movies: null, //这里放你自己定义的state变量及初始值
};
// 在ES6中,如果在自定义的函数里使用了this关键字,则需要对其进行“绑定”操作,否则this的指向不对
// 像下面这行代码一样,在constructor中使用bind是其中一种做法(还有一些其他做法,如使用箭头函数等)
this.fetchData = this.fetchData.bind(this);
}
render() {
if (!this.state.movies) {
return this.renderLoadingView(); //刚开始网络数据没有拉取下来,先展示一个加载页面
}
var movie = this.state.movies[0];
return this.renderMovie(movie);
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
// 注意,这里使用了this关键字,为了保证this在调用时仍然指向当前组件,我们需要对其进行“绑定”操作
this.setState({ //调用setState,会触发调用render,重新渲染界面
movies: responseData.movies,
});
})
.done();
}
componentDidMount() {//React组件的一个生命周期方法,组件加载完后调用。
this.fetchData();
}
renderLoadingView() {
return (
<View style={styles.container}>
<Text>
正在加载电影数据……
</Text>
</View>
);
}
renderMovie(movie){
return (
<View style={styles.container}>
<Image source={{uri:movie.posters.thumbnail}}
style={styles.thumbnail}></Image>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year} </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail: {
width: 53,
height: 80,
},
rightContainer:{
flex:1,
},
title:{
fontSize:20,
marginBottom:8,
textAlign:'center',
},
year:{
textAlign:'center',
},
});
AppRegistry.registerComponent('HttpTest', () => HttpTest);
运行结果:
本例子节选于: react native综合小例子:“电影列表”。
相关文章推荐
- React-Native学习笔记 使用ListView加载网络数据
- React-Native 学习笔记十七(网络请求)
- React-Native学习笔记之:Fetch网络请求
- react native 学习笔记----网络
- React-Native傻瓜式学习笔记(三):基于事件发布/订阅的网络请求工具类封装
- React Native 学习笔记(九)--网络请求 & 界面跳转
- 第三讲:React Native & HTML5+(学习笔记1)
- React-Native Android 学习笔记——2,自定义 logger
- React Native 学习笔记六(关于宽高的设置)
- React-Native 学习系列课程笔记(React-Native开发环境搭建)
- react native 学习笔记----将react native嵌入到Android原生应用
- React Native 学习笔记-iOS(一)
- React Native 学习笔记五(关于样式的使用)
- React Native 学习笔记二(React Native开发环境的搭建for mac)
- React Native 学习笔记八(文本输入的处理)
- react native 学习笔记之hello world
- React-Native Android 学习笔记——1,配置环境
- react native 开发基础=javaScript=学习笔记----函数
- React Native for Android 学习笔记(一) 操蛋的环境搭建与demo运行