React Native中的网络请求

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

https://segmentfault.com/a/1190000003810652

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 周少停 2016-09-28
 * fetch请求数据 header 参数 response转json 请求方式
 */

import React, {Component} from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from ‘react-native‘;

var Project = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={this.ssss}>
                    <Text>访问</Text>
                </TouchableOpacity>
            </View>
        );
    },
    ssss(){
        fetch(‘http://www.pintasty.cn/home/homedynamic‘, {
            method: ‘POST‘,
            headers: { //header
                ‘token‘: ‘eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJVLTliZGJhNjBjMjZiMDQwZGJiMTMwYWRhYWVlN2FkYTg2IiwiZXhwaXJhdGlvblRpbWUiOjE0NzUxMTg4ODU4NTd9.ImbjXRFYDNYFPtK2_Q2jffb2rc5DhTZSZopHG_DAuNU‘
            },
            body: JSON.stringify({ //参数
                ‘start‘: ‘0‘,
                ‘limit‘: ‘20‘,
                ‘isNeedCategory‘: true,
                ‘lastRefreshTime‘: ‘2016-09-25 09:45:12‘
            })
        })
            .then((response) => response.json()) //把response转为json
            .then((responseData) => { // 上面的转好的json
                    alert(responseData); /
                // console.log(responseData);
            })
            .catch((error)=> {
                alert(‘错误了‘);
            })
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor: ‘#F5FCFF‘
    }
});

AppRegistry.registerComponent(‘Project‘, () => Project);

完整源码下载:https://github.com/pheromone/React-Native-1

时间: 2024-12-23 09:49:56

React Native中的网络请求的相关文章

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

1 let common_url = 'http://192.168.1.1:8080/'; //服务器地址 2 let token = ''; //用户登陆后返回的token 3 /** 4 * 使用fetch实现图片上传 5 * @param {string} url 接口地址 6 * @param {JSON} params body的请求参数 7 * @return 返回Promise 8 */ 9 function uploadImage(url,params){ 10 return

React Native 中 component 生命周期

React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/51813677 (非原创) React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps object getDefaultProps() 执行过一次后,被创建的类会有缓存,映

Facebook React Native 中文教程一:介绍

React Native 中文版 Facebook 在 [React.js Conf 2015](http://conf.reactjs.com/) 大会上推出了基于 JavaScript 的开源框架 [React Native](http://facebook.github.io/react-native/),本中文教程翻译自 [React Native 官方文档](http://facebook.github.io/react-native/docs/getting-started.html

在 React Native 中使用 Redux 架构

前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也只有一个 Store,而且只用一个 state 树来管理组件的状态.随着应用逐渐变得复杂,React 将组件看成状态机的优势仿佛变成了自身的绊脚石.因为要管理的状态将会越来越多,直到你搞不清楚某个状态在不知道什么时候,由于什么原因,发生了什么变化.Redux 试图让状态的变化变得可预测.Redux

iOS开发中的网络请求

今天来说说关于iOS开发过程中的网络请求. 关于网络请求的重要性我想不用多说了吧.对于移动客户端来说,网络的重要性不言而喻.常见的网络请求有同步GET, 同步POST, 异步GET, 异步POST.今天来看一下四种网络请求的实现方式. 一.同步GET // 1.将网址初始化成一个OC字符串对象 NSString *urlStr = [NSString stringWithFormat:@"%@?query=%@&region=%@&output=json&ak=6E823

react native中Unable to load script from assets &#39;index.android.bundle&#39;解决方案

刚刚朋友问我,说是创建好一个项目,运行后报错:Unable to load script from assets 'index.android.bundle',以前好好的没出现这种现象,于是我找到一个解决方案,分享一下. 解决这个问题的方案是: 进入你该项目的根目录下的 android目录下的app目录下的src文件下的mian文件,(可能说的有点绕),在main件夹下,创建一个assets文件,这个文件是rn的资源文件夹! 之后用dos进入你的项目根目录,执行一下命令: react-nativ

ios中封装网络请求类

ios中封装网络请求类 #import "JSNetWork.h" //asiHttpRequest #import "ASIFormDataRequest.h" //xml 的解析 #import "UseXmlParser.h" //判断是否联网 #import "Reachability.h" //sbJson,判断json的解析 #import "JSON.h" @implementation JS

[转] 在React Native中使用ART

http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下React Native ART 现在手上闲下来了和大家分享一下React Native中的ART使用心得 React Native ART 究竟是什么? 所谓ART,是一个在React中绘制矢量图形的JS类库.这个类库抽象了一系统的通用接口,统一了SVG,canvas,VML这类矢量图形在 React中

swift中第三方网络请求库Alamofire的安装与使用

swift中第三方网络请求库Alamofire的安装与使用 Alamofire是swift中一个比较流行的网络请求库:https://github.com/Alamofire/Alamofire.下面我们就介绍一个这个库的安装与使用. 一.安装包管理工具CocoaPods 由于国内容易被墙,速度也非常的慢,这里我们使用提供的源 http://ruby.taobao.org/ gem sources --remove https://rubygems.org/ gem sources –a htt