您好,登錄后才能下訂單哦!
react-native-fs插件是文件對(duì)上傳和下載時(shí)使用的,iOS和android都可使用,F(xiàn)ile upload (iOS only)。
安裝命令:
npm install react-native-fs --save //注意:如果react native版本是<0.40安裝,使用此標(biāo)簽: npm install react-native-fs@2.0.1-rc.2 --save
安裝后執(zhí)行:
react-native link react-native-fs
在android/app/src/main/AndroidManifest.xml,里添加android讀寫(xiě)文件的權(quán)限
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
進(jìn)行完上述安裝操作后,可以使用這個(gè)插件的各種方法,每個(gè)方法的具體使用例子,請(qǐng)看鏈接:https://github.com/itinance/react-native-fs。在項(xiàng)目里我需要下載圖片文件,并獲得下載到本地后的圖片路徑,然后顯示圖片。所以使用到downloadFile方法。封裝了一個(gè)可調(diào)用的服務(wù),代碼如下:
downloadFile(imageId, cookie, callback) { const downloadDest = `${RNFS.DocumentDirectoryPath}/${((Math.random() * 1000) | 0)}.jpg`; var formUrl = CommonSvc.baseURL + '/api/image/0/' + imageId; //var formUrl = 'http://lorempixel.com/400/200/'; const options = { fromUrl: formUrl, toFile: downloadDest, background: true, headers: { 'Cookie': cookie //需要添加驗(yàn)證到接口要設(shè)置cookie }, begin: (res) => { //console.log(res); }, progress: (res) => { //console.log(res); } }; try { const ret = RNFS.downloadFile(options); ret.promise.then(res => { //callback(null, Platform.OS === 'android' ? downloadDest : 'file://' + downloadDest) callback(null, 'file://' + downloadDest) }).catch(err => { callback(err) }); } catch (e) { callback("error") } },
在實(shí)現(xiàn)這個(gè)功能到時(shí)候,android下載到本地的圖片顯示不出來(lái),這個(gè)查閱了相關(guān)資料后,原因是android調(diào)用此插件,需要添加接口驗(yàn)證信息(如果接口是需要驗(yàn)證的情況下),這個(gè)問(wèn)題怎么解決呢
調(diào)用react-native-fs插件時(shí),如果數(shù)據(jù)的接口是需要驗(yàn)證信息的,在android上運(yùn)行報(bào)錯(cuò),而在iOS上運(yùn)行沒(méi)問(wèn)題。原因是因?yàn)榻涌谑怯序?yàn)證信息的,而調(diào)用這個(gè)插件時(shí)沒(méi)有傳入,在iOS上會(huì)自動(dòng)加上驗(yàn)證信息,而 android需要手動(dòng)設(shè)置。
此錯(cuò)誤的解決方法:
1.在調(diào)用登錄接口時(shí),保存下cookie(cookie在response里),在調(diào)用react-native-fs時(shí)放在headers里傳入,代碼如下:
_appLogin(userName, password, callback){ fetch(commonSvc.baseURL + '/account/app-login', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ UserName: userName, Password: password }) }).then( (response) => { if (response.ok) { return response; } else { var message; switch (response.status) { case 710: message = LanguageChooseSvc.strings['api_common_' + 710]; break; case 711: message = LanguageChooseSvc.strings['api_common_' + 711]; break; case 400: message = LanguageChooseSvc.strings['api_common_' + 400]; break; default: message = commonSvc.httpErrorMessage; break; } throw {message: message}; } } ).then( (responseJson) => { callback(null, responseJson); } ).catch( (error) => { callback(error.message); } ); },
2.在調(diào)用react-native-fs時(shí)放在headers里傳入,代碼如下:
downloadFile(imageId, cookie, callback) { const downloadDest = `${RNFS.DocumentDirectoryPath}/${((Math.random() * 1000) | 0)}.jpg`; var formUrl = CommonSvc.baseURL + '/api/image/0/' + imageId; //var formUrl = 'http://lorempixel.com/400/200/'; const options = { fromUrl: formUrl, toFile: downloadDest, background: true, headers: { 'Cookie': cookie //需要添加驗(yàn)證到接口要設(shè)置cookie }, begin: (res) => { //console.log(res); }, progress: (res) => { //console.log(res); } }; try { const ret = RNFS.downloadFile(options); ret.promise.then(res => { //callback(null, Platform.OS === 'android' ? downloadDest : 'file://' + downloadDest) callback(null, 'file://' + downloadDest) }).catch(err => { callback(err) }); } catch (e) { callback("error") } },
接下來(lái)項(xiàng)目寫(xiě)到上傳文件的功能時(shí),繼續(xù)補(bǔ)充上傳功能...
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。