React Native网络请求及UI展示
废话不多说，先上代码
import React, { Component } from 'react';
import { AppRegistry,StyleSheet,Image, Text,View} 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'
},
thumbnail:{
width:100,height:80
},
rightContainer:{
flex:1
},
title:{
fontSize:20,marginBottom:8,textAlign:'center'
},
year:{
textAlign:'center'
},
});
class ReactNativeTest extends Component
{
constructor(props) {
super(props);
this.state = {
movies: null,
};
}
render()
{
if (!this.state.movies) {
return this.renderLoadingView();
}
var movie = this.state.movies[0];
return this.renderMovie(movie);
}
fetchData()
{
fetch(REQUEST_URL, {
method: 'GET'
})
.then((response) => response.json())
.then((responseData) => {
this.setState({
movies:responseData.movies,
});
})
.catch((error) => {
callback(error);
});
}
componentDidMount()
{
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} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>
);
}
}
AppRegistry.registerComponent('ReactNativeTest', () => ReactNativeTest);
讲解：
import React, { Component } from 'react';
import { AppRegistry,StyleSheet,Image, Text,View} from 'react-native';
从react中导入Component组件，在RN的世界里，组件相当于一个UI控件，App就是由各种Component组件组合在一起显示出来的。
从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'
},
thumbnail:{
width:100,height:80
},
rightContainer:{
flex:1
},
title:{
fontSize:20,marginBottom:8,textAlign:'center'
},
year:{
textAlign:'center'
},
});
1，用var变量声明一个网络请求的网址
2，定义一个样式表，样式表用来定义一组样式，样式中包括UI控件的width,height,marginTop,marginLeft等位置宽高属性，color,backgroundColor颜色值，fontSize字体大小，textAlign对齐方式等，也可以设置布局方式flex: 1是扩展到父视图的大小，如果是最外层则扩展到整个屏幕大小，flexDirection用于设置子UI是横向布局row还是纵向布局column，justifyContent用于设置UI布局的方式是居中，还是左对齐，右对齐，还是分散对齐等，alignItems设置与主轴垂直方向的布局方式
class ReactNativeTest extends Component
{
constructor(props) {
super(props);
this.state = {
movies: null,
};
}
定义一个组件ReactNativeTest，此名字必须与工程名一致
props：（1）大多数组件在创建时要设置各种参数，用于定制的这些参数就叫属性props
（2）比如Image设置source={pic}，pic为图片网络或本地路径，比如自定义的属性
（3）与state相比，props是在父组件中指定，并且一经指定不可更改。
state：state是用来监控状态改变，进而自动刷新页面的组件，我们将movies放入state中，表示从网络加载数据，数据返回后会触发setState方法修改movies的内容，这时候对应UI监控state的地方会自动刷新，重新执行，达到UI刷新的目的。
render()
{
if (!this.state.movies) {
return this.renderLoadingView();
}
var movie = this.state.movies[0];
return this.renderMovie(movie);
}
render方法用于返回组件创建的UI对象，根据state的movies来判断，如果movies没有东西，则调用renderLoadingView方法返回loading界面。
如果movies中有内容，则取出其中一个dic，传入renderMovie方法，返回指定显示内容的UI界面
fetchData()
{
fetch(REQUEST_URL, {
method: 'GET'
})
.then((response) => response.json())
.then((responseData) => {
this.setState({
movies:responseData.movies,
});
})
.catch((error) => {
callback(error);
});
}
fetchData方法为RN的网络请求方法，fetch传入URL和GET请求，.then中将response返回转为json，赋值给responseData，调用setState方法，给movies赋值，并捕获异常进行回调。
componentDidMount()
{
this.fetchData();
}
组件加载完毕后调用请求网络的方法。
renderLoadingView()
{
return (
<View style={styles.container}>
<Text>
正在加载电影数据......
</Text>
</View>
);
}
renderLoadingView方法返回加载中的界面，包括一个View，View中嵌套Text，Text相当于iOS中的label
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>
);
}
}
将网络请求返回的movie传进来，初始化对应的View，Image，Text显示图片，文本信息。
AppRegistry.registerComponent('ReactNativeTest', () => ReactNativeTest);
注册app组件，完成！棒棒的！
效果展示如下：
Paste_Image.png
Paste_Image.png
