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

最新推荐文章于 2018-01-09 19:06:32 发布

wirenc

最新推荐文章于 2018-01-09 19:06:32 发布

阅读量976

点赞数

分类专栏： react native

本文链接：https://blog.youkuaiyun.com/wirenc/article/details/52582280

版权

react native 专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何使用React Native进行网络数据请求，并展示了如何利用请求到的数据更新UI界面。文章详细解释了从网络获取数据的过程，以及如何在数据加载完成前显示加载提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

进入首页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(