React Native中的網絡請求fetch使用方法最爲簡單,但卻能夠實現大多數的網絡請求,須要瞭解更多的能夠訪問:javascript
http://www.javashuo.com/article/p-cqggfgkp-ec.htmlhtml
/** * 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);
fetch是人家已經封裝好,再度封裝只是基於本身項目進行的封裝,這裏只是基於公司項目實現一下,講解一下回調:java
封裝實現:react
/** * NetUitl 網絡請求的實現 * https://github.com/facebook/react-native */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, Image, TouchableOpacity, Platform, AsyncStorage } from 'react-native'; class NetUitl extends React.Component{ /* * get請求 * url:請求地址 * data:參數 * callback:回調函數 * */ static get(url,params,callback){ if (params) { let paramsArray = []; //拼接參數 Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key])) if (url.search(/\?/) === -1) { url += '?' + paramsArray.join('&') } else { url += '&' + paramsArray.join('&') } } //fetch請求 fetch(url,{ method: 'GET', }) .then((response) => { callback(response) }).done(); } /* * post請求 * url:請求地址 * data:參數 * callback:回調函數 * */ static post(url,params,headers,callback){ //fetch請求 fetch(url,{ method: 'POST', headers:{ 'token': headers }, body:JSON.stringify(params) }) .then((response) => response.json()) .then((responseJSON) => { callback(responseJSON) }) .done(); } } module.exports = NetUitl;
調用:git
rightAction(){ let params = {'start':'0',limit:'20','isNeedCategory': true, 'lastRefreshTime': '2016-09-25 09:45:12'}; NetUitl.post('http://www.pintasty.cn/home/homedynamic',params,'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJVLTliZGJhNjBjMjZiMDQwZGJiMTMwYWRhYWVlN2FkYTg2IiwiZXhwaXJhdGlvblRpbWUiOjE0NzUxMTg4ODU4NTd9.ImbjXRFYDNYFPtK2_Q2jffb2rc5DhTZSZopHG_DAuNU',function (set) { //下面的就是請求來的數據 console.log(set) }) //get請求,以百度爲例,沒有參數,沒有header NetUitl.get('https://www.baidu.com/','',function (set) { //下面是請求下來的數據 console.log(set) }) }
另:由於iOS9對https的調整,須要在項目的info.plist添加Key:NSAllowsArbitraryLoads,具體方法看http://www.cnblogs.com/shaoting/p/5148323.htmlgithub
完整源碼下載:https://github.com/pheromone/React-Native-1json