Ziemlich neu zu reagieren native und seine Konzepte. Ich habe für eine Weile mit RN gespielt, eine Anwendung zu erstellen, holen API Daten ausSo cachen Sie API-Daten mit AsyncStorage Reagieren Sie auf Native
http://jsonplaceholder.typicode.com/photos
Ich habe in der Dokumentation von AsyncStorage suchen zu implementieren Wie kann ich die API-Daten zwischenspeichern, so dass es beim Beenden der Anwendung nicht immer wieder mit dem Abrufen der Daten aus dem Web zu tun hat, sondern es nicht erfolgreich implementieren konnte.
Es wird großartig sein, wenn Sie mir Hilfe/Vorschlag basierend darauf zur Verfügung stellen können. Ich habe meinen Quellcode für die 2 wichtigen Dateien in meiner Anwendung, zusammen mit der Test.js Datei mit, wie ich versucht habe, zu erreichen.
import React, {Component} from 'react';
import { FlatList, View, Text, AsyncStorage, ActivityIndicator } from 'react-native';
import axios from 'axios';
import GalleryDetail from './GalleryDetail';
class GalleryList extends Component {
state = { photos: []};
componentDidMount() {
axios.get('http://jsonplaceholder.typicode.com/photos')
.then(response => this.setState({ photos: response.data }))
.catch((error)=> console.warn("fetch Error: ", error));
}
getPhotos = async()=> {
try {
photos = await AsyncStorage.getItem('GalleryPhotos');
}
catch (error) {
console.error(error);
}
}
savePhotos(){
AsyncStorage.setItem('GalleryPhotos', this.state.photos);
console.log('works !');
}
renderPhoto = ({item})=> {
return <GalleryDetail photo={item}/>
}
keyExtractor = (photo, index) => photo.id;
render() {
if(!this.state.photos){
return <ActivityIndicator/>;
}
return (
<FlatList
data = {this.state.photos}
keyExtractor={this.keyExtractor}
renderItem={this.renderPhoto}
/>
);
}
}
export default GalleryList;
und GalleryDetail mit GalleryList- verknüpft
import React, {Component} from 'react';
import { Text, View, Image } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
const GalleryDetail = (props)=> {
return (
<Card>
<CardSection style = {styles.headerContentStyle}>
<Image
style={styles.thumbnailStyle}
source = {{ uri: props.photo.thumbnailUrl}}/>
<Text style= {styles.textStyle}>{props.photo.title} </Text>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
thumbnailStyle: {
height: 60,
width: 60
},
textStyle: {
fontSize: 12,
//textAlign: 'right',
flexDirection: 'row',
justifyContent: 'flex-end',
flex: 1,
flexWrap: 'wrap',
marginLeft: 5,
marginRight: 5,
}
}
export default GalleryDetail;
Meine Methode zu versuchen, war dass- Nach dem Start der Anwendung, wird es zuerst in asyncStorage aussehen, wenn es die Daten- findet es von Asynchron holt andernfalls ins Web gehen, holen und für spätere Verwendung wieder speichern. Ich habe versucht, so etwas in einer separaten Datei zu implementieren, da ich meine bereits laufende App nicht aufschlüsseln wollte. Die seltsame gebrochene Syntax ist
State = {
photos: []
}
componentDidMount() {
// just a variable acting to fetch data from the stored keyvalue pair
check = AsyncStorage.getItem("PhotosKey").then((response) => {
this.setState({"PhotosKey": response});
}).done();
if(check) {
console.log('Data was fetched!!!!!');
check();
}
else {
console.log("Data was not fetched!");
var Data = axios.get('http://jsonplaceholder.typicode.com/photos').
then(response => this.setState({ photos: response.data })).
catch((error)=> console.warn("fetch Error: ", error));
}
}
Vielen Dank im Voraus!
Dank @Subramanya für Ihre Hilfe. Es hat mir eine wirklich gute Vorstellung davon gegeben, wie mein Code aussehen wird. Ich habe nur wenige Bedenken zu teilen. Mein Motiv, asyncstorage innerhalb von React native hinzuzufügen, ist so, dass es beim Start der Anwendung Daten von GalleryPhotos holen sollte, wenn es nicht in der Lage war, Daten zu finden und sie dann für die nächste Verwendung zu speichern. Der Code, den Sie geschrieben haben, ist meiner Meinung nach mehr wie das Abrufen und Speichern der Daten jedes Mal. Da die Daten immer gleich sind, müssen sie nicht jedes Mal abgerufen werden. Bitte korrigieren Sie mich, wenn ich etwas verpasse. :) –
@ Rex - Vielen Dank für Ihren Code. Ich werde diesen Code bei der Aktualisierung meiner Anwendung nach der Implementierung von Redux vollständig untersuchen. Aber vielen Dank für deine Zeit. Ich glaube, es dauerte viel Zeit, um meine Frage zu beantworten (so lang sein) –
Ich habe die Antwort basierend auf Ihrem Kommentar aktualisiert, fügte ich einen Haken mit ob Bedingung, ob GalleryPhotos existiert oder nicht und dann api Anruf machen, hoffe es hilft –