【原创】东方耀reactnative 视频26之-仿异步获取网络数据

进入首页homeui获取网络数据

android原生开发： 子线程 handler机制，异步作务asynctask

reactnative擅长ui界面处理，通过this.state来触发

rn中的网络请求： xmlhttprequest fetch post get

mvc mlistview.setadapter(new myadapter)

item封装成一个组件

homeUI.js

/**

* Sample React Native App

* https://github.com/facebook/react-native

*/

import React, { Component } from ‘react’;

import {

AppRegistry,

StyleSheet,

ListView,

Text,

Image,

View

} from ‘react-native’;

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

export default class HomeUI extends Component{

constructor(props){

super(props);//这一句不能省略，照抄就行

this.state={

movies:null, //这里放自己定义的state变量及初始值

};

}

_pressButton(){

const {navigator} = this.props;

if(navigator){

//很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:了

navigator.pop();

}

}

goBack(){

const { navigator } = this.props;

if(navigator) {

//很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:了

navigator.pop();

}

}

render() {
if(!this.state.movies){
//如果movies = null的情况，初始情况，渲染加载视图
return this.renderLoadingView();
}
//从网络上获取了数据 的情况

var movie = this.state.movies[0];
return this.renderMovie(movie);
}
renderLoadingView(){

return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={this.goBack.bind(this)}>
正在网络上获取数据..
</Text>
</View>
);
}

//这是渲染一个电影信息

renderMovie(movie){

return(