API에서 로드되는 React Native 앱의 동적 배경을 만드는 방법

앱용 이미지를 가져올 수 있는 수많은 멋진 API가 있습니다. 이 가이드에서는 배경 이미지를 로드하기 위해 Pixabay API를 사용할 것입니다. pixabay.com에서 API 키를 가져와야 합니다.
ImageBackground에서 react-native 요소 가져오기

import { ImageBackground} from 'react-native';

ImageBackground를 적용하려는 구성 요소의 상위 요소로 추가하고 스타일을 추가합니다.

export default function SomeComponent(props) {
  return (
    // rendering ImageBackground element with backgroundImage from state passed as source of the image
    <ImageBackground
    source={{ uri: backgroundImage }}
    style={styles.background}
    >
    <View style={styles.app}>
  </View>
  </ImageBackground>
  );
}

스타일:

const styles = StyleSheet.create({
  background: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "flex-end"
  },
  app: {
    marginHorizontal: "auto",
    maxWidth: 500,
    backGroundColor: "transparent"
  }
});

일부 기본 이미지가 포함된 이미지의 상태 변수를 가져오고useState 선언합니다.

import {useState} from 'react'

  // declare state variable for single background image, initially some image
  const [backgroundImage, setBackgroundImage] = useState("https://pixabay.com/get/g5087a1cec28279208368920fd3d30343bf08ca1002b5316e4cdd8fac66e19af31811080dc13c67f0f49c113298c4724166f201a96b48651d0b49efddfea5d2b6_640.jpg");

예를 들어 Pixabay와 같은 일부 API에서 이미지를 가져오는 함수를 추가합니다.

// Please add your api key which you can get from pixabay.com  
  const pixabayAPIkey='YOUR API KEY'
  let newBackground = () => {
    // sending request to the API
    fetch(
      `https://pixabay.com/api/?key=${pixabayAPIkey}&q=cat&orientation=vertical&safesearch=true&per_page=100`
      )
    .then((data) => {
      return data.json();
    })
    .then((pics) => {
        // creating a random number for index to pick one of the images from 100 we will get
        let randomImage = parseInt(Math.random() * pics.totalHits);
        // set this random image to tbe the current background
        setBackgroundImage(pics.hits[randomImage].largeImageURL);
        // set all images in state to use later for changing the background
        setAllImages(pics.hits);
      })
    .catch((err) => {
      console.log(err);
    })
    .finally(() => console.log("Finally: ", backgroundImage, allImages.length));
  };
  // executing the function only on first load once, no need for useEffect
  newBackground();

이 함수에서 우리는 이미지 배열을 얻을 것이므로 구성 요소 및 남용 API의 수명 주기 동안 매번 새 요청을 보내는 대신 상태에 저장한 다음 배경을 업데이트하는 데 사용합시다.

모든 이미지를 유지하기 위해 상태 변수를 추가합니다.

  // declare state variable for all images we will get from API
  const [allImages, setAllImages] = useState([]);

newBackground에서 setAllImages(pics.hits)로 업데이트됩니다.

이제 첫 번째 렌더링에서 많은 이미지를 가져와 그 중 하나를 현재 배경으로 설정합니다.

확인을 위해 배경을 수동으로 변경하는 버튼을 추가할 수도 있습니다. 사용자 또는 앱에서 만든 일부 이벤트로 버튼을 교체할 수 있습니다.

<Button title="New Kitty" onPress={()=>allImages.length>0&&updateBackground()} />

따라서 최종 코드는 다음과 같습니다.

import React from "react";
// import all the elements we will use from react-native
import { ImageBackground, Button, StyleSheet, View } from "react-native";
// import useState
import { useState } from "react";

function App() {
  // declare state variable for single background image, initially some image
  const [backgroundImage, setBackgroundImage] = useState("https://pixabay.com/get/g5087a1cec28279208368920fd3d30343bf08ca1002b5316e4cdd8fac66e19af31811080dc13c67f0f49c113298c4724166f201a96b48651d0b49efddfea5d2b6_640.jpg");
  // declare state variable for all images we will get from API
  const [allImages, setAllImages] = useState([]);
  // Please add your api key which you can get from pixabay.com  
  const pixabayAPIkey='YOUR API KEY'
  let newBackground = () => {
    // sending request to the API
    fetch(
      `https://pixabay.com/api/?key=${pixabayAPIkey}&q=cat&orientation=vertical&safesearch=true&per_page=100`
      )
    .then((data) => {
      return data.json();
    })
    .then((pics) => {
        // creating a random number for index to pick one of the images from 100 we will get
        let randomImage = parseInt(Math.random() * pics.totalHits);
        // set this random image to tbe the current background
        setBackgroundImage(pics.hits[randomImage].largeImageURL);
        // set all images in state to use later for changing the background
        setAllImages(pics.hits);
      })
    .catch((err) => {
      console.log(err);
    })
    .finally(() => console.log("Finally: ", backgroundImage, allImages.length));
  };
  // executing the function only on first load once, no need for useEffect
  newBackground();

  // updating background from state
  const updateBackground = () => {
    // generating random index
    let randomImage = parseInt(Math.random() * (allImages.length - 1));
    // setting random image from images array in state to be the current background
    setBackgroundImage(allImages[randomImage].largeImageURL);
  };

  return (
    // rendering ImageBackground element with backgroundImage from state passed as source of the image
    <ImageBackground
    source={{ uri: backgroundImage }}
    style={styles.background}
    >
    <View style={styles.app}>
  {/* button to trigger change of the background if we have images in the allImages */}
  <Button title="New Kitty" onPress={()=>allImages.length>0&&updateBackground()} />
  </View>
  </ImageBackground>
  );
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "flex-end"
  },
  app: {
    marginHorizontal: "auto",
    maxWidth: 500,
    backGroundColor: "transparent"
  }
});

export default App;

다음은 코드가 있는 sandbox입니다.

그게 다야 :)