react-native-fs插件是文件對上傳和下載時使用的，iOS和android都可使用，F(xiàn)ile upload (iOS only)。
創(chuàng)新互聯(lián)建站從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元敦煌做網(wǎng)站,已為上家服務(wù),為敦煌各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108
安裝命令：
npm install react-native-fs --save //注意：如果react native版本是<0.40安裝，使用此標簽： 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讀寫文件的權(quán)限
進行完上述安裝操作后，可以使用這個插件的各種方法，每個方法的具體使用例子，請看鏈接：https://github.com/itinance/react-native-fs。在項目里我需要下載圖片文件,并獲得下載到本地后的圖片路徑，然后顯示圖片。所以使用到downloadFile方法。封裝了一個可調(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 //需要添加驗證到接口要設(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")
}
},
在實現(xiàn)這個功能到時候，android下載到本地的圖片顯示不出來，這個查閱了相關(guān)資料后，原因是android調(diào)用此插件，需要添加接口驗證信息（如果接口是需要驗證的情況下），這個問題怎么解決呢
調(diào)用react－native－fs插件時，如果數(shù)據(jù)的接口是需要驗證信息的，在android上運行報錯，而在iOS上運行沒問題。原因是因為接口是有驗證信息的，而調(diào)用這個插件時沒有傳入，在iOS上會自動加上驗證信息，而 android需要手動設(shè)置。
此錯誤的解決方法：
1.在調(diào)用登錄接口時，保存下cookie（cookie在response里），在調(diào)用react－native－fs時放在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時放在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 //需要添加驗證到接口要設(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")
}
},
接下來項目寫到上傳文件的功能時，繼續(xù)補充上傳功能...
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
