Obrazy można łatwo dodać do aplikacji React Native. Uzyskaj wszystkie informacje o wbudowanym komponencie Image.

Obrazy zapewniają dużą wartość aplikacjom mobilnym. Mogą pomóc zilustrować koncepcje, przekazać informacje, wzbudzić zainteresowanie wizualne i zapewnić kontekst dla określonych treści, których użytkownicy aplikacji mogą nie przegapić.

Reaguj natywny komponent obrazu

Komponent obrazu React Native jest domyślnym komponentem udostępnianym przez bibliotekę React Native do renderowania obrazów w aplikacjach mobilnych. Komponent może ładować obrazy zarówno ze źródeł lokalnych, jak i zdalnych. Zapewnia kilka rekwizytów do dostosowywania i stylizacji renderowanych obrazów.

Aby użyć komponentu obrazu w swojej aplikacji, zaimportuj Obraz od reaguj natywnie biblioteka:

import Reagować z'reagować';
import { Arkusz stylów, obraz, widok } z„reaguj natywnie”;
konst Aplikacja = () => {
powrót (

 styl={style.obraz}
 źródło={wymagać(„./assets/mój-obraz.jpg”)}
 />
 </View>
 );
};
konst style = StyleSheet.create({





instagram viewer



 pojemnik: {
 przewód: 1,
 elementy wyrównania: 'Centrum',
 uzasadnij Treść: 'Centrum',
 },
 obraz: {
 szerokość: 200,
 wysokość: 200,
 promień granicy: 100,
 },
});

Powyżej jest prosta Aplikacja element z obrazem. The Obraz składnik zajmuje a styl prop, który ustawia szerokość, wysokość, I promień granicy obrazu. Zajmuje to również źródło prop, który ładuje obraz z lokalnego pliku znajdującego się w folderze „assets” w katalogu aplikacji. The źródło prop definiuje ścieżkę obrazu do uwzględnienia i może akceptować zarówno lokalne, jak i sieciowe/zdalne źródła obrazu.

Obrazy lokalne są dostępne na urządzeniu użytkownika i można je przechowywać tymczasowo lub na stałe. Możesz przechowywać obrazy lokalne w katalogu projektu aplikacji, takim jak plik aktywa teczka. Możesz także zlokalizować obrazy poza katalogiem aplikacji, na przykład w rolce aparatu lub bibliotece zdjęć urządzenia. Oto przykład ścieżki źródłowej do obrazu lokalnego:

ur: „plik:///ścieżka/do/mojego-obrazu.jpg” }} />

Obrazy sieciowe są dostarczane przez Internet. Mogą zawierać adresy URL HTTP/HTTPS lub identyfikatory URI danych zakodowane w formacie base64, które osadzają dane bezpośrednio w adresie URL przy użyciu schematu kodowania Base64.

Rekwizyty do dostosowywania komponentu obrazu

Istnieje kilka rekwizytów, których można użyć do nadawania stylu i dostosowywania komponentu React Native Image.

tryb zmiany rozmiaru

The tryb zmiany rozmiaru prop określa, w jaki sposób React powinien zmienić rozmiar i pozycję obrazu w swoim kontenerze. Istnieje kilka dostępnych wartości dla tryb zmiany rozmiaru, z których każdy będzie miał inny wpływ na obraz.

  • okładka: Ta wartość przeskaluje obraz równomiernie, tak aby oba wymiary były równe lub większe niż jego element zawierający. Obraz jest następnie wyśrodkowany w kontenerze. Użycie tej wartości może spowodować przycięcie obrazu w celu zachowania proporcji.
  • zawierać: Spowoduje to próbę idealnego dopasowania i wyśrodkowania obrazu w wymiarach pojemnika. Może to jednak spowodować puste miejsce wokół krawędzi obrazu.
  • rozciągać się: rozciągać się wartość rozciąga obraz, aby wypełnić cały kontener, niezależnie od współczynnika proporcji. Czasami powoduje zniekształcenie obrazu.
  • powtarzać: Ta wartość powtarza obraz zarówno w poziomie, jak iw pionie, aby wypełnić cały kontener.
  • Centrum: Spowoduje to wyśrodkowanie obrazu w elemencie kontenera bez jego skalowania.

onŁaduj

To jest funkcja oddzwaniania który jest uruchamiany po zakończeniu ładowania obrazu. Możesz go użyć do wykonania akcji po załadowaniu obrazu, takich jak aktualizacja stanu komponentu lub wyświetlenie użytkownikowi komunikatu.

onBłąd

The onBłąd prop zostanie uruchomiony, jeśli lub gdy obraz się nie załaduje. Zapewnia sposób na wykonanie niezbędnych działań, jeśli wystąpi błąd podczas próby załadowania obrazu. Możesz wyświetlić użytkownikowi komunikat o błędzie lub spróbować ponownie załadować obraz.

domyślne źródło

Ten rekwizyt określa obraz zastępczy, który ma zostać wyświetlony, jeśli obraz główny nie zostanie załadowany. Możesz go użyć do dostarczenia obrazu domyślnego lub obrazu zastępczego podczas ładowania obrazu głównego.

Obsługa zdalnych obrazów z interfejsu API

Może być konieczne pobranie obrazu aplikacji z interfejsu API lub serwera zdalnego i wyświetlenie go w aplikacji. Możesz użyć wbudowanego React aportować funkcja lub Biblioteka żądań API, taka jak Axios w tym celu.

Oto przykład pobierania i wyświetlania obrazu ze zdalnego interfejsu API przy użyciu aportować funkcjonować:

konst [ImageUri, setImageUri] = useState(zero);
użyjEfekt(() => {
 aportować(' https://example.com/api/images/1')
 .Następnie(odpowiedź => odpowiedź.json())
 .Następnie(dane => setImageUri (data.url))
 .złapać(błąd =>konsola.błąd (błąd));
}, []);
powrót (

 {imageUri? (
ur: imageUri }} />
 ): (
Ładowanie...</Text>
 )}
 </View>
);

Uruchomienie tego kodu w Twojej aplikacji spowoduje pobranie obrazu z ustawionego zdalnego łącza API. Przykład najpierw tworzy zmienną stanu dla obrazUri. W granicach UżyjEfekt hak, ew aportować funkcja pobiera imageUri i przechowuje go w zmiennej stanu za pomocą setImageUri().

Wreszcie renderuje Obraz składnik z źródło prop ustawiony na identyfikator URI obrazu, podczas gdy wyświetlany jest wskaźnik ładowania, czekając na wyświetlenie obrazu.

Używanie właściwości zasad pamięci podręcznej do kontrolowania zachowania pamięci podręcznej

Twoja przeglądarka może przechowywać w pamięci podręcznej obrazy ładowane ze zdalnych adresów URL, dzięki czemu w przyszłości będzie mogła je szybko załadować ponownie. Możesz dostosować zachowanie buforowanego obrazu za pomocą Pamięć podręczna rekwizyt. Ta właściwość może określać, w jaki sposób przeglądarka powinna buforować obraz i jak powinna unieważniać tę pamięć podręczną.

Właściwość pamięci podręcznej może przyjmować wartości takie jak domyślnie, przeładuj, wymuś pamięć podręczną, I tylko-jeśli-buforowane.

Oto przykład użycia Pamięć podręczna prop do kontrolowania zachowania pamięci podręcznej obrazu:

 źródło={{
 adres: ' https://example.com/images/my-image.png',
 Pamięć podręczna: „wymuś pamięć podręczną”,
 klucz pamięci podręcznej: 'mój obraz',
 niezmienny: PRAWDA
 }}
/>

The Pamięć podręczna właściwość jest ustawiona na „wymuś pamięć podręczną”, co oznacza, że ​​przeglądarka powinna załadować obraz z pamięci podręcznej, jeśli jest dostępna, nawet jeśli ta wersja pamięci podręcznej jest stara.

Nowy rekwizyt klucz pamięci podręcznej tu też gra. Jest ustawiony na 'mój obraz', który będzie służył jako niestandardowy klucz pamięci podręcznej, którego można później użyć do odwoływania się do obrazu w pamięci podręcznej.

Również niezmienny właściwość jest ustawiona na PRAWDA, który mówi przeglądarce, aby traktowała ten wpis w pamięci podręcznej jako niezmienny i nigdy go nie unieważniała.

Wszystko o obrazach

Komponent React Native Image zapewnia potężne i elastyczne środki do wyświetlania obrazów, w tym stylizacji, obsługi zdalnych obrazów i kontrolowania zachowania pamięci podręcznej.

W przypadku obrazów zdalnych zawsze można użyć symbolu zastępczego, aby wyświetlić tymczasowy obraz lub tekst podczas ładowania obrazu zdalnego. Zapewni to lepsze wrażenia użytkownika, zapewniając natychmiastową wizualną informację zwrotną i zapobiegając sytuacji, w której aplikacja przestanie odpowiadać.