Οι εικόνες προστίθενται εύκολα στην εφαρμογή React Native. Λάβετε όλες τις πληροφορίες σχετικά με το ενσωματωμένο στοιχείο Image.

Οι εικόνες δίνουν μεγάλη αξία στις εφαρμογές για κινητές συσκευές. Μπορούν να βοηθήσουν στην απεικόνιση εννοιών, στη μετάδοση πληροφοριών, στη δημιουργία οπτικού ενδιαφέροντος και στην παροχή πλαισίου για συγκεκριμένο περιεχόμενο που ίσως δεν θέλετε να χάνουν οι χρήστες της εφαρμογής σας.

Το React Native Image Component

Το στοιχείο εικόνας React Native είναι το προεπιλεγμένο στοιχείο που παρέχεται από τη βιβλιοθήκη React Native για την απόδοση εικόνων στις εφαρμογές σας για κινητά. Το στοιχείο μπορεί να φορτώσει εικόνες τόσο από τοπικές όσο και από απομακρυσμένες πηγές. Παρέχει πολλά στηρίγματα για την προσαρμογή και το στυλ των εικόνων που αποδίδονται.

Για να χρησιμοποιήσετε το στοιχείο εικόνας στην εφαρμογή σας, πραγματοποιήστε εισαγωγή Εικόνα από το αντιδρώ-γηγενής βιβλιοθήκη:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { StyleSheet, Image, View } από'react-native'





instagram viewer

;
συνθ Εφαρμογή = () => {
ΕΠΙΣΤΡΟΦΗ (

 style={styles.image}
 πηγή={απαιτώ("./assets/my-image.jpg")}
 />
 </View>
 );
};
συνθ styles = StyleSheet.create({
 δοχείο: {
 καλώδιο: 1,
 στοίχιση στοιχείων: 'κέντρο',
 justifyContent: 'κέντρο',
 },
 εικόνα: {
 πλάτος: 200,
 ύψος: 200,
 Ακτίνα συνόρων: 100,
 },
});

Παραπάνω είναι ένα απλό App συστατικό με μια εικόνα. ο Εικόνα συστατικό παίρνει α στυλ στήριγμα που θέτει το πλάτος, ύψος, και συνοριακή ακτίνα της εικόνας. Χρειάζεται επίσης α πηγή prop που φορτώνει την εικόνα από ένα τοπικό αρχείο που βρίσκεται στο φάκελο "assets" στον κατάλογο της εφαρμογής. ο πηγή Το prop ορίζει τη διαδρομή της εικόνας που θα συμπεριλάβει και μπορεί να δεχθεί τόσο τοπικές όσο και δικτυακές/απομακρυσμένες πηγές εικόνας.

Οι τοπικές εικόνες είναι διαθέσιμες στη συσκευή του χρήστη και μπορείτε να τις αποθηκεύσετε είτε προσωρινά είτε μόνιμα. Μπορείτε να αποθηκεύσετε τοπικές εικόνες στον κατάλογο έργων της εφαρμογής, όπως ένα περιουσιακά στοιχεία ντοσιέ. Μπορείτε επίσης να εντοπίσετε εικόνες εκτός του καταλόγου της εφαρμογής, όπως στο ρολό της κάμερας ή στη βιβλιοθήκη φωτογραφιών της συσκευής. Ακολουθεί ένα παράδειγμα διαδρομής πηγής προς μια τοπική εικόνα:

uri: 'file:///path/to/my-image.jpg' }} />

Οι εικόνες δικτύου παραδίδονται μέσω του Διαδικτύου. Θα μπορούσαν να περιλαμβάνουν διευθύνσεις URL HTTP/HTTPS ή URI δεδομένων με κωδικοποίηση base64, τα οποία ενσωματώνουν δεδομένα απευθείας στη διεύθυνση URL χρησιμοποιώντας το σχήμα κωδικοποίησης Base64.

Υποστηρίγματα για την προσαρμογή του στοιχείου εικόνας

Υπάρχουν πολλά στηρίγματα που μπορείτε να χρησιμοποιήσετε για να διαμορφώσετε και να προσαρμόσετε το στοιχείο React Native Image.

αλλαγή μεγέθους

ο αλλαγή μεγέθους Το prop καθορίζει πώς το React πρέπει να αλλάξει το μέγεθος και να τοποθετήσει μια εικόνα μέσα στο κοντέινερ της. Υπάρχουν πολλές διαθέσιμες τιμές για αλλαγή μεγέθους, καθένα από τα οποία θα επηρεάσει διαφορετικά την εικόνα.

  • κάλυμμα: Αυτή η τιμή θα κλιμακώσει την εικόνα ομοιόμορφα, έτσι ώστε και οι δύο διαστάσεις να είναι ίσες ή μεγαλύτερες από το στοιχείο που περιέχει. Στη συνέχεια, η εικόνα κεντράρεται μέσα στο κοντέινερ. Η χρήση αυτής της τιμής μπορεί να έχει ως αποτέλεσμα την περικοπή της εικόνας για τη διατήρηση της αναλογίας διαστάσεων.
  • περιέχω: Αυτό θα προσπαθήσει να χωρέσει και να κεντράρει την εικόνα τέλεια στις διαστάσεις του δοχείου. Ωστόσο, αυτό μπορεί να έχει ως αποτέλεσμα κενό χώρο γύρω από τις άκρες της εικόνας.
  • τέντωμα: Ο τέντωμα τιμή επεκτείνει την εικόνα για να γεμίσει ολόκληρο το κοντέινερ, ανεξάρτητα από την αναλογία διαστάσεων. Μερικές φορές προκαλεί παραμόρφωση της εικόνας.
  • επαναλαμβάνω: Αυτή η τιμή επαναλαμβάνει την εικόνα τόσο οριζόντια όσο και κάθετα για να γεμίσει ολόκληρο το κοντέινερ.
  • κέντρο: Αυτό θα κεντράρει την εικόνα μέσα στο στοιχείο κοντέινερ χωρίς να την κλιμακώσει.

onLoad

Αυτό είναι ένα λειτουργία επανάκλησης που εκτελείται όταν ολοκληρωθεί η φόρτωση της εικόνας. Μπορείτε να το χρησιμοποιήσετε για να εκτελέσετε ενέργειες μετά τη φόρτωση της εικόνας, όπως η ενημέρωση της κατάστασης του στοιχείου ή η εμφάνιση ενός μηνύματος στον χρήστη.

έναΣφάλμα

ο έναΣφάλμα Το prop θα εκτελεστεί εάν ή όταν η εικόνα δεν φορτώσει. Παρέχει έναν τρόπο εκτέλεσης των απαραίτητων ενεργειών εάν παρουσιαστεί σφάλμα κατά την προσπάθεια φόρτωσης της εικόνας. Θα μπορούσατε να εμφανίσετε ένα μήνυμα σφάλματος στον χρήστη ή να προσπαθήσετε ξανά να φορτώσετε την εικόνα.

προεπιλεγμένη πηγή

Αυτό το στηρίγμα καθορίζει μια εναλλακτική εικόνα που θα εμφανίζεται εάν η κύρια εικόνα αποτύχει να φορτωθεί. Μπορείτε να το χρησιμοποιήσετε για να παρέχετε μια προεπιλεγμένη εικόνα ή μια εικόνα κράτησης θέσης κατά τη φόρτωση της κύριας εικόνας.

Χειρισμός απομακρυσμένων εικόνων από ένα API

Ίσως χρειαστεί να λάβετε την εικόνα για την εφαρμογή σας από ένα API ή απομακρυσμένο διακομιστή και να την εμφανίσετε στην εφαρμογή σας. Μπορείτε να χρησιμοποιήσετε το ενσωματωμένο React φέρω λειτουργία ή μια Βιβλιοθήκη αιτημάτων API όπως το Axios για το σκοπό αυτό.

Ακολουθεί ένα παράδειγμα του τρόπου λήψης και εμφάνισης μιας εικόνας από ένα απομακρυσμένο API χρησιμοποιώντας το φέρω λειτουργία:

συνθ [imageUri, setImageUri] = useState(μηδενικό);
useEffect(() => {
 φέρω(' https://example.com/api/images/1')
 .έπειτα(απάντηση => answer.json())
 .έπειτα(δεδομένα => setImageUri (data.url))
 .σύλληψη(λάθος =>κονσόλα.error (σφάλμα));
}, []);
ΕΠΙΣΤΡΟΦΗ (

 {imageUri? (
uri: imageUri }} />
 ): (
Φόρτωση...</Text>
 )}
 </View>
);

Η εκτέλεση αυτού του κώδικα εντός της εφαρμογής σας θα φέρει μια εικόνα από τον καθορισμένο απομακρυσμένο σύνδεσμο API. Το παράδειγμα δημιουργεί πρώτα μια μεταβλητή κατάστασης για το imageUri. Μέσα σε ένα useEffect αγκίστρι, το φέρω Η συνάρτηση ανακτά το imageUri και το αποθηκεύει στη μεταβλητή κατάστασης χρησιμοποιώντας setImageUri().

Τέλος, αποδίδει το Εικόνα συστατικό με το πηγή ρυθμίστε το prop στο URI της εικόνας ενώ εμφανίζεται μια ένδειξη φόρτωσης, περιμένοντας να εμφανιστεί η εικόνα.

Χρήση του Prop Policy Cache για τον έλεγχο της συμπεριφοράς της προσωρινής μνήμης

Το πρόγραμμα περιήγησής σας μπορεί να αποθηκεύσει προσωρινά τις εικόνες που φορτώνει από απομακρυσμένες διευθύνσεις URL, ώστε να μπορεί να τις φορτώσει ξανά γρήγορα στο μέλλον. Μπορείτε να προσαρμόσετε τη συμπεριφορά της αποθηκευμένης εικόνας χρησιμοποιώντας το κρύπτη στήριγμα. Αυτό το υποστήριγμα μπορεί να καθορίσει πώς ένα πρόγραμμα περιήγησης πρέπει να αποθηκεύει προσωρινά την εικόνα και πώς να ακυρώνει αυτήν την κρυφή μνήμη.

Η βάση προσωρινής μνήμης μπορεί να λάβει τιμές όπως προεπιλογή, επαναφόρτωση, αναγκαστική προσωρινή μνήμη, και μόνο αν αποθηκευτεί στην κρυφή μνήμη.

Ακολουθεί ένα παράδειγμα του τρόπου χρήσης του κρύπτη prop για τον έλεγχο της συμπεριφοράς της κρυφής μνήμης μιας εικόνας:

 πηγή={{
 uri: ' https://example.com/images/my-image.png',
 κρύπτη: "force-cache",
 cacheKey: "η εικόνα μου",
 αμετάβλητος: αληθής
 }}
/>

ο κρύπτη ιδιοκτησία έχει οριστεί σε "force-cache", το οποίο υποδεικνύει ότι το πρόγραμμα περιήγησης θα πρέπει να φορτώσει την εικόνα από την προσωρινή μνήμη, εάν είναι διαθέσιμη, ακόμα κι αν αυτή η έκδοση προσωρινής μνήμης είναι παλιά.

Ένα νέο στήριγμα cacheKey παίζει και εδώ. Έχει οριστεί σε "η εικόνα μου", το οποίο θα χρησιμεύσει ως προσαρμοσμένο κλειδί κρυφής μνήμης που μπορείτε να χρησιμοποιήσετε για να αναφέρετε αργότερα την αποθηκευμένη εικόνα.

Επίσης το αμετάβλητος ιδιοκτησία έχει οριστεί σε αληθής, το οποίο λέει στο πρόγραμμα περιήγησης να χειριστεί αυτήν την καταχώρηση προσωρινής μνήμης ως αμετάβλητη και να μην την ακυρώσει ποτέ.

Όλα υπάρχουν για τις εικόνες

Το στοιχείο React Native Image παρέχει ένα ισχυρό και ευέλικτο μέσο για την εμφάνιση εικόνων, συμπεριλαμβανομένου του στυλ, του χειρισμού των απομακρυσμένων εικόνων και του ελέγχου της συμπεριφοράς της προσωρινής μνήμης.

Για απομακρυσμένες εικόνες, θα μπορούσατε πάντα να χρησιμοποιήσετε ένα σύμβολο κράτησης θέσης για να εμφανίσετε μια προσωρινή εικόνα ή κείμενο κατά τη φόρτωση της απομακρυσμένης εικόνας. Αυτό θα δημιουργήσει μια καλύτερη εμπειρία χρήστη παρέχοντας άμεση οπτική ανατροφοδότηση και αποτρέποντας την εμφάνιση της εφαρμογής που δεν ανταποκρίνεται.