A képeket könnyű hozzáadni a React Native alkalmazáshoz. Használja ki a beépített Image komponens minden csínját-bínját.

A képek rengeteg értéket képviselnek a mobilalkalmazások számára. Segíthetnek a fogalmak illusztrálásában, az információk közvetítésében, vizuális érdeklődést kelthetnek, és kontextust adhatnak olyan konkrét tartalmakhoz, amelyeket nem szeretné, hogy az alkalmazás felhasználói kihagyjanak.

A React Native Image Component

A React Native képösszetevő a React Native könyvtár által biztosított alapértelmezett összetevő a képek megjelenítéséhez a mobilalkalmazásokban. Az összetevő helyi és távoli forrásból is képes képeket betölteni. Számos kelléket biztosít a megjelenített képek testreszabásához és stílusához.

Ha a képösszetevőt az alkalmazásban szeretné használni, importálja Kép tól react-native könyvtár:

import Reagál tól től'reagál';
import { Stíluslap, Kép, Nézet } tól től"react-native";
const App = () => {
Visszatérés (

 style={styles.image}
 forrás={igényelnek("./assets/my-image.jpg")}
 />
 </View>
 );
};





instagram viewer

const styles = StyleSheet.create({
 konténer: {
 Flex: 1,
 alignItems: 'központ',
 justifyContent: 'központ',
 },
 kép: {
 szélesség: 200,
 magasság: 200,
 határsugár: 100,
 },
});

A fenti egy egyszerű App komponens képpel. A Kép komponens vesz a stílus kellék, amely beállítja a szélesség, magasság, és borderRadius a képről. Az is kell a forrás prop, amely betölti a képet az alkalmazáskönyvtár "eszközök" mappájában található helyi fájlból. A forrás A prop meghatározza a kép elérési útját, és képes elfogadni mind a helyi, mind a hálózati/távoli képforrásokat.

A helyi képek elérhetők a felhasználó eszközén, és ideiglenesen vagy véglegesen tárolhatók. Helyi képeket tárolhat az alkalmazás projektkönyvtárában, például egy eszközök mappát. A képeket az alkalmazás könyvtárán kívül is megkeresheti, például az eszköz kameratekercsében vagy fotókönyvtárában. Íme egy példa a helyi kép forrásútvonalára:

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

A hálózati képeket az interneten keresztül szállítják. Tartalmazhatnak HTTP/HTTPS URL-eket vagy base64-kódolású adat-URI-kat, amelyek a Base64 kódolási séma használatával közvetlenül az URL-be ágyazzák be az adatokat.

Kellékek a képkomponens testreszabásához

Számos kelléket használhat a React Native Image összetevő stílusához és testreszabásához.

resizeMode

A resizeMode A prop meghatározza, hogy a React hogyan méretezze át és helyezze el a képet a tárolójában. A következőhöz több érték is elérhető resizeMode, amelyek mindegyike eltérően befolyásolja a képet.

  • borító: Ez az érték egyenletesen méretezi a képet úgy, hogy mindkét méret egyenlő vagy nagyobb legyen, mint a benne lévő elem. A kép ezután a tároló közepére kerül. Ennek az értéknek a használata a kép levágását eredményezheti a képarány megtartása érdekében.
  • tartalmaz: Ez megpróbálja tökéletesen illeszkedni és középre igazítani a képet a tároló méreteibe. Ez azonban üres teret eredményezhet a kép szélei körül.
  • nyújtózkodni: A nyújtózkodni érték kinyújtja a képet, hogy kitöltse a teljes tárolót, tekintet nélkül a képarányra. Néha a kép torzulását okozza.
  • ismétlés: Ez az érték megismétli a képet vízszintesen és függőlegesen is, hogy kitöltse a teljes tartályt.
  • központ: Ezzel a tárolóelemen belül középre helyezi a képet anélkül, hogy átméretezné.

Feltöltés alatt

Ez egy visszahívási funkció amely akkor fut le, amikor a kép betöltődik. Használhatja a kép betöltése után műveletek végrehajtására, például az összetevő állapotának frissítésére vagy üzenet megjelenítésére a felhasználónak.

onError

A onError A prop akkor fut, ha nem sikerül betölteni a képet. Lehetőséget biztosít a szükséges műveletek végrehajtására, ha hiba történik a kép betöltése közben. Megjeleníthet egy hibaüzenetet a felhasználónak, vagy megpróbálhatja újra betölteni a képet.

alapértelmezettForrás

Ez a javaslat megad egy tartalék képet, amely akkor jelenik meg, ha a fő kép nem töltődik be. Használhatja alapértelmezett kép vagy helyőrző kép megadására, miközben a fő kép betöltődik.

Távoli képek kezelése API-ból

Előfordulhat, hogy be kell szereznie az alkalmazáshoz tartozó képet egy API-ról vagy távoli szerverről, és meg kell jelenítenie az alkalmazásban. Használhatja a beépített Reactot elhozni függvény vagy an API kérések könyvtára, mint például az Axios erre a célra.

Íme egy példa arra, hogyan lehet képet lekérni és megjeleníteni egy távoli API-ból a elhozni funkció:

const [imageUri, setImageUri] = useState(nulla);
useEffect(() => {
 fetch(' https://example.com/api/images/1')
 .akkor(válasz => válasz.json())
 .akkor(adat => setImageUri (data.url))
 .fogás(hiba =>konzol.error (hiba));
}, []);
Visszatérés (

 {imageUri? (
uri: imageUri }} />
 ): (
Betöltés...</Text>
 )}
 </View>
);

Ha ezt a kódot futtatja az alkalmazáson belül, a rendszer lekér egy képet a beállított távoli API-linkről. A példa először létrehoz egy állapotváltozót a imageUri. belül a useEffect horog, a elhozni függvény lekéri az imageUri-t és eltárolja az állapotváltozóban a segítségével setImageUri().

Végül megjeleníti a Kép komponens a forrás prop állítsa be a kép URI-jára, miközben egy betöltési jelző jelenik meg, és várja, hogy a kép megjelenjen.

A Cache Policy Prop használata a gyorsítótár viselkedésének szabályozására

Böngészője gyorsítótárba tudja helyezni a távoli URL-ekről betöltött képeket, így a jövőben gyorsan újra betöltheti azokat. A gyorsítótárazott kép viselkedését testreszabhatja a gyorsítótár támaszt. Ez a beállítás meghatározhatja, hogy a böngésző hogyan tárolja a képet, és hogyan érvénytelenítse azt.

A gyorsítótár olyan értékeket vehet fel, mint alapértelmezett, újratöltés, gyorsítótár, és csak-ha-gyorsítótárban.

Íme egy példa arra, hogyan kell használni a gyorsítótár javaslat egy kép gyorsítótár viselkedésének szabályozására:

 forrás={{
 uri: ' https://example.com/images/my-image.png',
 gyorsítótár: "force-cache",
 cacheKey: "az én képem",
 változhatatlan: igaz
 }}
/>

A gyorsítótár tulajdonság értékre van állítva "force-cache", amely azt jelzi, hogy a böngészőnek a gyorsítótárból kell betöltenie a képet, ha az elérhető, még akkor is, ha a gyorsítótár verziója régi.

Új kellék cacheKey itt is játékban van. Be van állítva "az én képem", amely egyéni gyorsítótár-kulcsként fog szolgálni, amellyel később hivatkozhat a gyorsítótárazott képre.

Továbbá a változhatatlan tulajdonság értékre van állítva igaz, amely arra utasítja a böngészőt, hogy ezt a gyorsítótár-bejegyzést változtathatatlanként kezelje, és soha ne érvénytelenítse.

Minden van a képekről

A React Native Image komponens hatékony és rugalmas eszközt biztosít a képek megjelenítéséhez, beleértve a stílust, a távoli képek kezelését és a gyorsítótár viselkedésének szabályozását.

Távoli képek esetén mindig használhat egy helyőrzőt egy ideiglenes kép vagy szöveg megjelenítéséhez, miközben a távoli kép betöltődik. Ez jobb felhasználói élményt biztosít azáltal, hogy azonnali vizuális visszajelzést ad, és megakadályozza, hogy az alkalmazás ne reagáljon.