Dieses Mal werde ich Ihnen die Anwendungsfälle des React-Native-FS-Plug-Ins ausführlich erläutern Sind die tatsächlichen Fälle, werfen wir einen Blick darauf.
Das React-Native-FS-Plugin wird zum Hochladen und Herunterladen von Dateien verwendet. Es kann sowohl auf iOS als auch auf Android verwendet werden. Datei-Upload (nur iOS).Installationsbefehl:
Führen Sie nach der Installation Folgendes aus:npm install react-native-fs --save //注意：如果react native版本是<0.40安装，使用此标签： npm install react-native-fs@2.0.1-rc.2 --save
react-native link react-native-fs
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
github.com/itinance/react-native -fs. Im Projekt muss ich die Bilddatei herunterladen, nach dem Herunterladen auf die lokale Datei den Bildpfad abrufen und dann das Bild anzeigen. Verwenden Sie also die downloadFile-Methode. Kapselt einen aufrufbaren Dienst. Der Code lautet wie folgt:
Bei der Implementierung dieser Funktion können die von Android auf das lokale Gerät heruntergeladenen Bilder nicht angezeigt werden. Der Grund dafür ist, dass Android beim Aufrufen dieses Plug-Ins Informationen zur
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 //需要添加验证到接口要设置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")
}
},hinzufügen muss (falls vorhanden). Die Schnittstelle muss überprüft werden) (unten), wie dieses Problem gelöst werden kann Wenn beim Aufrufen des Plug-Ins „react-native-fs“ für die Datenschnittstelle Verifizierungsinformationen erforderlich sind, wird bei der Ausführung unter Android ein Fehler gemeldet, bei der Ausführung unter iOS treten jedoch keine Probleme auf. Der Grund dafür ist, dass die Schnittstelle über Verifizierungsinformationen verfügt, diese jedoch beim Aufruf dieses Plug-Ins nicht übergeben werden. Unter iOS werden die Verifizierungsinformationen automatisch hinzugefügt, während sie unter Android manuell festgelegt werden müssen.
Problemumgehung für diesen Fehler:
1. Speichern Sie beim Aufrufen der
-Anmeldeschnittstelledas Cookie (das Cookie befindet sich in der Antwort) und fügen Sie es in die Header ein, wenn Sie „react-native-fs“ aufrufen. Der Code lautet wie folgt:
2. Wenn Sie „react-native-fs“ aufrufen, geben Sie den Code wie folgt ein:_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);
}
);
}, 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 //需要添加验证到接口要设置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")
}
},Empfohlene Lektüre:
js implementiert die Zeichenbeschränkung für chinesische Zeichen = zwei ZeichenVerwendung von js zur Implementierung des Armaturenbretts im AutoDas obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsfälle des React-Native-FS-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was sind die JQuery-Plug-Ins?
Einführung in die Plug-Ins, die für die Ausführung von Java durch vscode erforderlich sind
So verbergen Sie Dateierweiterungen
Verhindern Sie die Verwendung von default()
Was ist der Unterschied zwischen dem TCP-Protokoll und dem UDP-Protokoll?
Wie tippe ich die Inschrift auf dem Münzkreis ein?
Emule-Server-Link
So reinigen Sie das zu volle Laufwerk C des Computers
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
