一、代码

 import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native'; //默认应用的容器组件
export default class App extends Component { //构造函数
constructor(props) {
super(props);
this.state = {
responseText: null
};
} //渲染
render() {
return (
<View style={styles.container}>
<Text style={styles.item} onPress={this.doXMLHttpRequest.bind(this)}>获取数据</Text>
<Text>{this.state.responseText}</Text>
</View>
);
} //使用XMLHttpRequest请求数据
doXMLHttpRequest(){
var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
} if (request.status === 200) {
alert("请求成功!");
this.setState({responseText: request.responseText})
console.log(request.responseText); } else {
alert("请求失败!");
}
}; request.open('GET', 'https://httpbin.org/get');
request.send();
}
} //样式定义
const styles = StyleSheet.create({
container:{
flex: 1,
marginTop:25
},
item:{
margin:15,
height:30,
borderWidth:1,
padding:6,
borderColor:'#ddd',
textAlign:'center'
},
});

二、效果图

React native中使用XMLHttpRequest请求数据的更多相关文章

  1. React native 中使用Fetch请求数据

    一.代码 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from ' ...

  2. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  3. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

  4. react native中如何往服务器上传网络图片

    let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...

  5. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  6. 解决React Native使用Fetch API请求网络报Network request failed

    问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...

  7. React Native中的远程调试是不可靠的

    一.原因 当您发现rn app在关闭远程调试后,一些功能无法正常工作时,这很可能是由于设备上的JavaScript执行环境与远程调试器之间的细微差别造成的. 例如,日期问题,Date构造函数似乎接受C ...

  8. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

  9. react native 中的ListView

    ListView 的运用: 1.首先在react native中引入这个组件: 2.初始化的ListView 的相关属性: constructor(props) { super(props); con ...

随机推荐

  1. Parallel并行编程初步

    Parallel并行编程可以让我们使用极致的使用CPU.并行编程与多线程编程不同,多线程编程无论怎样开启线程,也是在同一个CPU上切换时间片.而并行编程则是多CPU核心同时工作.耗时的CPU计算操作选 ...

  2. 廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式

    拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段 ...

  3. jquery使用淘宝接口跨域查询手机号码归属地实例

    <h1>手机号码归属地查询</h1>    <div class="outer">        <p>请输入手机号码</p& ...

  4. ueditor在使用requirejs时,报ZeroClipboard undefined错误

    再网上找到了 http://blog.csdn.net/xundh/article/details/44536665       这样一篇文章, 其中原因说的很明白了 是因为在有requirejs时, ...

  5. SQL集合运算参考及案例(二):树形节点数量逐级累计汇总

    问题描述: 我们经常遇到这样一个问题,类似于面对一个树形结构的物料数据,需要将库存中每一种物料数量汇总到物料上展示出来:或者说组织机构是一棵树,我们需要统计每一个节点上的人员数量(含下级节点的累计数量 ...

  6. [置顶] android 与JavaScript的互相调用

    1.html代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> ...

  7. Sublime Text 皮肤插件安装

    安装皮肤, 举例sodahttps://github.com/buymeasoda/soda-themectrl+shift+p => Package Control: Install Pack ...

  8. C# html转mht

    项目中引入cdosys.dll组件,位置:  C:\Windows\System32\cdosys.dll CDO.ADODB 这些类都来自于cdosys.dll组件 /// <summary& ...

  9. Python中strip()、lstrip()、rstrip()用法详解

    Python中有三个去除头尾字符.空白符的函数,它们依次为: strip: 用来去除头尾字符.空白符(包括\n.\r.\t.' ',即:换行.回车.制表符.空格)lstrip:用来去除开头字符.空白符 ...

  10. ejabberd开发和部署

    ejabberd开发和部署 (金庆的专栏 2016.10) 搭建了自己的ejabberd集群,然后少量更改源码,实现定制的XMPP服务器. 从github fork ejabberd 库,定为 mas ...