ReactNative网络请求

1、登录界面

登录.png

import React, { Component } from 'react';
import {   
  AppRegistry,   
  StyleSheet,   
  TouchableOpacity,  
  Image,  
  TextInput,    
  Text,  
  View,   
  Navigator, 
  StatusBar
} from 'react-native';
import NetUtil from './NetUtil';
import Util from './Util';
import MainView from './MainView';
export default class LoginView extends Component {   
 constructor(props) {     
   super(props);       
   this.state =  {  
                          userNameText:"13918068798",             
                           passwordText:"1234554321"     
                  }; 
   }   
 loginClick(){      
    let data={'seller_name':this.state.userNameText,'password':this.state.passwordText};      
    let url='http://192.168.0.85/mobile/index.php?act=login&op=seller_login';        
    var common=NetUtil.commonParamsWithAct('login','seller_login');     
    var  _this=this;        
    NetUtil.post(url,data,common,function (set){  
          if(set.code==10000){       
              Util.saveItem('member_id',set.datas.member_info.member_id);     
              Util.saveItem('member_name',set.datas.member_info.member_name);         
              Util.saveItem('member_nickname',set.datas.member_info.member_nickname);    
              Util.saveItem('member_avatar',set.datas.member_info.member_avatar);       
              Util.saveItem('store_id',set.datas.store_info.store_id);     
              Util.saveItem('store_name',set.datas.store_info.store_name);     
              Util.saveItem('TOKEN',set.datas.token);                Util.saveItem('IsLogin','YES');           
     const { navigator } = _this.props;  
      if(navigator) {             
           navigator.push({           
             name: '主页面',                 
             component: MainView,             
       }) }          
  }else{          
     Util.saveItem('member_id','');
     Util.saveItem('member_name','');
     Util.saveItem('member_nickname','');
     Util.saveItem('member_avatar','');
     Util.saveItem('store_id','');
     Util.saveItem('store_name','');
     Util.saveItem('TOKEN','');
     Util.saveItem('IsLogin','NO');         
  }  
 }); 
 }   

 render() {      
   var Dimensions = require('Dimensions');     
   var {width, height} = Dimensions.get('window');        
   var _this=this;    
    return (       
           
                
                  
            商 · 家 · 管 · 理 · 中 · 心            
             {                                _this.setState({                                    userNameText:text  })  }  }                            placeholderTextColor='white'/>            
                         
             {                                _this.setState({                                    passwordText:text    })   } }                            placeholderTextColor='white'                            secureTextEntry={true}  />      
                        
                  
                  登录     
                      
              
 );   
 };
}
var styles = StyleSheet.create({  
    iconImage:{     
        width:70,    
        height:70,     
        marginTop:50,     
        alignSelf:'center',  
    },   
    titleStyle:{     
        marginTop:20,     
        width:200,      
        color:'white',     
        fontSize:18,     
        alignSelf:'center',      
        textAlign:'center',      
        backgroundColor:'transparent' 
   },   
    inputUsreName:{      
       marginTop:120,     
       height:35,      
       color:'white',     
       alignSelf:'center',   
   },  
   inputPassword:{   
     marginTop:20,    
     height:35,    
     color:'white',     
     alignSelf:'center',  
  },  
  loginBtn:{    
     marginTop:50,      
     height:40,      
     alignSelf:'center',   
     textAlign:'center',    
     padding:10,    
     fontSize:16,   
     backgroundColor:'#696969',        
     color:'white',     
     borderWidth:2,     
     borderRadius:15,      
     borderColor:'#696969',   
   }
});

2、网络请求

import React, { Component } from 'react';
import MD5 from './md5';
class NetUtil extends React.Component {  
  //post请求   
  /***url :请求地址     
       *data:参数     
       *callback:回调函数   
  */    
static  postFrom(url, data, callback) {      
    var fetchOptions = {         
        method: 'POST',       
        headers: {       
             'Accept': 'application/json',     
             'Content-Type': 'application/x-www-form-urlencoded'        
        },        
        body:'data='+data+''
    };      
   fetch(url, fetchOptions).then((response) => 
        response.text()).then((responseText) => 
             {       
                    callback(JSON.parse(responseText));    
            }).done();  
  } 
   /**    
     *url :请求地址    
     *data:参数(Json对象)   
     *callback:回调函数   
  */    
static postJson (url, data, callback) {   
     var fetchOptions = {       
         method: 'POST',         
         headers: {            
        'Accept': 'application/json',                
        'Content-Type': 'application/json'    
        },         
       body: JSON.stringify(data)      
  };    
    fetch(url, fetchOptions).then((response) =>  
         response.text()).then((responseText) => {  
                  callback(JSON.parse(responseText));  
             }).done();   
 }  
  /**   
     *url :请求地址  
     *data:参数(Json对象) 
     *callback:回调函数   
  */    
static post (url, data,common, callback) {  
      var sign=this.sign(data,common);     
      var timestamp = (new Date()).valueOf();   
      var arr=[];      
      for (var key in data) {        
         var obj=key+'='+data[key];             
         arr.push(obj);       
      }      
     var fetchOptions = {     
          method: 'POST',     
          headers: {            
         'Accept': 'application/json',         
         'Content-Type':'application/x-www-form-urlencoded',             
         'PROJECTID':'2',    
         'CLIENT':'51355579f87bb4bcc06ff980e26e10b473d7b72a',              
         'TIMESTAMP':timestamp,        
         'VERSION':'1.0.0',        
         'SIGN':sign,        
         'TOKEN':''           
      },          
       body: arr.join('&')    
    };     
   fetch(url, fetchOptions).then((response) => 
      response.text()).then((responseText) => {   
             callback(JSON.parse(responseText));  
          }).done();   
 }   
 static commonParamsWithAct(act,op){     
      var timestamp = (new Date()).valueOf();       
     return {       
          'PROJECTID':'2',      
          'CLIENT':'51355579f87bb4bcc06ff980e26e10b473d7b72a',      
          'TIMESTAMP':timestamp,       
          'VERSION':'1.0.0',        
          'TOKEN':'',        
          'act':act,        
          'op':op      
  };  
  }   
 static sign(data,common){    
    var arr=[];      
    for (var key in data) {    
        var obj=key+'='+data[key];      
        arr.push(obj);      
    }      
    for (var key in common) {  
          var obj=key+'='+common[key];    
          arr.push(obj);     
    }       
    arr.sort();    
    var sign= arr.join('&');   
    var result= MD5.hex_md5(sign);     
    return result;   
 }   
 //get请求   
 /**   
    *url :请求地址   
    *callback:回调函数   
  */   
 static  get(url, callback) {    
    fetch(url).then((response) => 
             response.text()).then((responseText) => {  
                    callback(JSON.parse(responseText));            
             }).done();   
       }
}
module.exports = NetUtil;