ImageBackground komponens

Az ImageBackground komponens arra való, hogy valamely elemnek háttérképet állítsunk be. Segítségével teljesképernyős hátterek készíthetők.

A webfejlesztők számára ugyanezt el lehet érni a CSS-ből ismert background-image tulajdonsággal.

Ahogy a fotón is látszik, brutál háttereket lehet vele készíteni :).

Az ImageBackground használata

Telepítést nem igényel, mivel a react-native része. Tehát aki nem szereti a harmadik féltől származó komponensek használatát, az örülni fog, mert csupán importálni kell:

import { ImageBackground } from "react-native";

Ugyanazokkal a tulajdonságokkal (props) rendelkezik, mint az Image komponens. A lelke az egésznek az uri props, amiben a kép elérési útját kell megadni.

A hivatalos dokumentációból vett példa alapján mondjuk:

const image = { uri: "https://reactjs.org/logo-og.png" };

Az ImageBackground egy nyitó és záró taggal is rendelkező komponens, ugyanis ez egy konténerként funkcionáló komponens. Ez azt jelenti, hogy a belsejében több más elem is lehet. Például a képen levő felirat, amit egy Text komponenssel adhatunk meg.

Példa

Maradva a dokumentációból vett példánál, vegyük a következőt:

import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";

const image = { uri: "https://reactjs.org/logo-og.png" };

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} resizeMode="cover" style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    justifyContent: "center"
  },
  text: {
    color: "white",
    fontSize: 42,
    lineHeight: 84,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000000c0"
  }
});

export default App;

A fenti kóddal egy olyan mobil appot hoztunk létre, aminek van egy külső konténere, ami a teljes képernyőt elfoglalja (flex: 1).

Ezen belül található az ImageBackground komponens, ami kapott egy képet az uri props-ban. Maga a háttérkép komponens is elfoglalja a teljes rendelkezésre álló területet (flex: 1), ami jelen esetben a teljes képernyő.

Aztán az ImageBackground hasában elhelyeztünk egy Text komponenst. Magyarul a háttérképen teljesen középre igazítva megjelent egy szöveg, egy felirat.

Ennek a hasznos kis komponensnek a segítségével például felhasználói kártyákat készíthetünk, ami nem más, mint egy kép és rajta néhány felirat.

Megjegyezném még halkan, hogy a React Native Paper csomagnak van egy külön Card nevű komponense, amivel hasonlókat csinálhatunk. De ugye ebben az esetben telepítenünk kellene a React Native Paper csomagot.