詳解react-native-fs插件的使用以及遇到的坑
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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React使用xlsx和js-export-excel實(shí)現(xiàn)前端導(dǎo)出
這篇文章主要為大家詳細(xì)介紹了React如何分別使用xlsx和js-export-excel實(shí)現(xiàn)前端導(dǎo)出功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-02-02
react redux中如何獲取store數(shù)據(jù)并將數(shù)據(jù)渲染出來(lái)
這篇文章主要介紹了react redux中如何獲取store數(shù)據(jù)并將數(shù)據(jù)渲染出來(lái)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了從react?hooks閉包陷阱切入淺談react?hooks，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了react中使用video.js的踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
JavaScript的React框架中的JSX語(yǔ)法學(xué)習(xí)入門(mén)教程
這篇文章主要介紹了JavaScript的React框架中的JSX語(yǔ)法學(xué)習(xí)入門(mén)教程,React是由Facebook開(kāi)發(fā)并開(kāi)源的高人氣js框架,需要的朋友可以參考下2016-03-03
React報(bào)錯(cuò)信息之Expected?an?assignment?or?function?call?and?
這篇文章主要介紹了React報(bào)錯(cuò)之Expected?an?assignment?or?function?call?and?instead?saw?an?expression,下面有兩個(gè)示例來(lái)展示錯(cuò)誤是如何產(chǎn)生的，需要的朋友可以參考下2022-08-08
本文主要介紹了React18之狀態(tài)批處理的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
React18系列reconciler從0實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了React18系列reconciler從0實(shí)現(xiàn)過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了React構(gòu)建組件的幾種方式及區(qū)別，組件就是把圖形、非圖形的各種邏輯均抽象為一個(gè)統(tǒng)一的概念來(lái)實(shí)現(xiàn)開(kāi)發(fā)的模式文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
React Native (簡(jiǎn)稱(chēng)RN)是Facebook于2015年4月開(kāi)源的跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)框架，是Facebook早先開(kāi)源的JS框架 React 在原生移動(dòng)應(yīng)用平臺(tái)的衍生產(chǎn)物，支持iOS和安卓?jī)纱笃脚_(tái)。本文將介紹React Native與IOS端之間的交互。2021-06-06