一种基于react-native快速实现移动端数据上传的方法
【技术领域】
[0001 ] 本发明设及react-native技术领域，特别设及一种基于react-native快速实现移 动端数据上传的方法。
【背景技术】
[0002] React化tive结合了Web应用和化tive应用的优势，可W使用JavaScript来开发 iOS和Amlroid原生应用。在化vaScript中用React抽象操作系统原生的UI组件，代替DOM元 素来擅染等。
[0003] 当前面临的问题是：
[0004] React化tive是化cebook最新开源的，可W同时用来开发iOS和An化Oid应用，每 个需要把数据上传到服务器移动应用，都在重复实现数据提交的功能，如果有一种同时支 持iOS和Amlroid，可W把数据上传到服务器的组件即插即用就好了。
【发明内容】
[0005] 本发明解决的技术问题在于提供一种基于react-native快速实现移动端数据上 传的方法;能够快速实现同时支持iOS和Amlroid把数据上传到服务器的问题。
[0006] 本发明解决上述技术问题的技术方案是：
[0007] 所述的方法包括：
[000引先自定义需要上传到服务器端的数据字段，并通过this, state给相应字段赋值、 对每个字段加约束条件，满足要求的字段才可W提交；
[0009] 然后，把自定义字段封装成对象；
[0010] 接着封装接口类api.js，用来实现接口配置;封装工具类Util. js，用来验证数据 上传成功与否；
[0011] 再调用接口类api . js把数据上传到服务器；
[0012] 调用工具类化il.js与服务器进行交互，验证数据是否上传成功，当data, status 等于200返回数据上传成功，否则失败返回异常提醒；
[0013] 最后，通过语句var Uploa加 ata = require(Uploa加 ata. js')，组件化封装成 化Ioa邮a化.js;可W直接把组件插入到自己的项目中，从而实现从移动端把数据上传到服 务器端。
[0014] 所述的移动端包括iOS和An化oid。
[0015] 本发明的有益效果:提供了一种基于react-native快速实现移动端数据上传的方 法;可W快速实现iOS和Amlroid把数据上传到服务器端。
【附图说明】
[0016] 下面结合附图对本发明进一步说明：
[0017] 图1为本发明的方法流程图。
【具体实施方式】
[0018] 如图1所示，本发明采用如下步骤可W快速实现从移动端把数据上传到服务器端：
[0019] 步骤一、自定义需要上传到服务器端的数据字段，并通过this, state给相应字段 赋值，并对每个字段加约束条件，满足要求才可W提交； var username = this.state.username;
[0020] var email = this.state.email; var password = this-state-pa能word;, var tel 二 this.stateJel; if(!username Il !email Il !password Il '!tel)I
[0021] //C提示V用户名、初給密码、邮箱、电党必填，请确认!I); }
[0022 ]步骤二、把自定义字段封装成对象； var obj = { 破emam'e': usemame，' email: emaU,
[0023] password: password, td化1 I. /，
[0024] 步骤S、封装接口类api.js，用于实现接口配置，封装工具类util, js，用来验证数 据上传成功与否； var API= { ho油:'http:念碟Lcxksy.饼m',努攘口月良务蕃 createUs卸:巧Ii斌汾perA:曲0姑AddU犹riji私.犯tion，-;7/数据上传接口 m泣(Me'.e邱孤ts.'二 API:
[0025] var U付.1 二 I //post请求 post: fonction (url, data, callback) J var feIx'hOpdons = { method; 'POST', headers: { 'Accept': 'appi ication/j son', 'CoMeM-Type': 'appI ication,(j son' body: JSON.Stringify(Clata) }； 把化h(Lirl,传化hOpt-ions)
[0026] ,l;hen((response) => resp 饼 iseJextO) .then((respoiiseText) => { cal Aack(JSC)N .parse(responseTex1;)); 巧 K //Key key: HHDJKDKLDKLFJDNDNNNLDIOOIONATIVE' }；： 'mo'dale...鮮ports =' IM;
[0027] 步骤四、调用接口类api.js把数据上传到服务器，调用工具类化il.js与服务器进 行交互，验证数据是否上传成功，当da化.S化化S等于200返回数据上传成功，失败返回异常 提醒。 var API = requireC，/api.js');
[002引 var Util= requireC. /\山1 JS');
[0029] 'Varpath. = APl.hosj.t + API,c:rea'teUser +'&usemame''+u.semame+'&emay=，+eman+，&passw〇rd='+passtv'〇i'd+'&td='+tel; Util.posl(path, obj, function(data){ 'i f( d a ta. St at-L! S ===200)( /I/数据上传成功 I elseI //数据上传尖败 } ));
[0030] 步骤五、组件化封装成UploadData? js，可1^通过语句var UploadData二require 化ploadData. jV );直接把组件插入到自己的项目中，从而实现移动端数据上传到服务器 JLjJU 乂而。
【主权项】
1. 一种基于react-native快速实现移动端数据上传的方法，其特征在于:所述的方法 包括： 先自定义需要上传到服务器端的数据字段，并通过this, state给相应字段赋值、对每 个字段加约束条件，满足要求的字段才可以提交； 然后，把自定义字段封装成对象； 接着封装接口类api . js，用来实现接口配置;封装工具类util. js，用来验证数据上传 成功与否； 再调用接口类api . js把数据上传到服务器； 调用工具类Util. js与服务器进行交互，验证数据是否上传成功，当data, status等于 200返回数据上传成功，否则失败返回异常提醒； 最后，通过语句var UploadData = require (UploadData · j s '），组件化封装成 UploadData. js;可以直接把组件插入到自己的项目中，从而实现从移动端把数据上传到服 务器端。2. 根据权利要求1所述的一种基于react-native快速实现移动端数据上传的方法，其 特征在于:所述的移动端包括i〇S和Android。
【专利摘要】本发明涉及react-native技术领域，特别涉及一种基于react-native快速实现移动端数据上传的方法。本发明方法是先自定义需要上传到服务器端的数据字段，并通过this.state给相应字段赋值，并对每个字段加约束条件，满足要求才可以提交；然后，把自定义字段封装成对象；接着封装接口类api.js，用来实现接口配置，封装工具类util.js，用来验证数据上传成功与否；再调用接口类api.js把数据上传到服务器，调用工具类Util.js与服务器进行交互，验证数据是否上传成功，当data.status等于200返回数据上传成功，否则失败返回异常提醒；最后，组件化封装成UploadData.js，直接把组件插入到自己的项目中。本发明提供了一种基于react-native快速实现移动端数据上传的方法，可以用于快速实现iOS和Android把数据上传到服务器端。
【IPC分类】H04L29/08
【公开号】CN105635265
【申请号】CN201510996487
【发明人】张来卿, 徐震宇, 季统凯
【申请人】国云科技股份有限公司
【公开日】2016年6月1日
【申请日】2015年12月24日