React Native (4-2: RN 컴포넌트 알아보기(Image))

Image, ImageBackground 컴포넌트를 사용할 수 있다. Image 컴포넌트는 children 을 가질 수 없다. 저번 시간에 알아본 것처럼, 컴포넌트에 source 로 {require("./경로")} 를 지정해주면 해당 경로에 있는 이미지를 사용하게 되는 것이다. App 에 asset 으로 포함된 이미지 대신 웹에 있는 이미지를 불러와서 보여줄 수도 있다.

 

 

 

<ImageBackground
    source={require("./bg_img.jpg")}
    resizeMode="cover"
    style={styles.backdrop}
>

이와 같이 (위 코드예시는 asset 으로 포함시킨 것이지만) 이미지를 네트워크 주소로 지정하는 것은 이미지를 asset 으로 포함시켜 지정하는 것보다 약간의 이점이 있다고 한다. 개발기간에 프로토타이핑을 진행할 때는 모든 에셋을 꼼꼼히 import 하는 것보다 이 방법이 더 쉬우며, 모바일 앱의 저장 용량을 줄여줄 수도 있다. 단, 나중에 사용자가 앱을 실행할 때 asset 을 내려받기 위해 네트워크를 사용해야 하기에 대부분의 경우 URI 로 지정하는 방법을 사용하지 않기는 한다.

 

 

또, 위에서 resizeMode 라는 속성이 사용되었다. resizeMode 는 contain, cover, 혹은 stretch 로 지정해주어 이미지가 프레임 안에 어떻게 렌더링하는지 결정해줄 수 있다.

 

 

추가로, Native 코드를 작성할 때 GIF 와 WebP 는 android 에서 기본적으로 제공이되지는 않는다고 한다. adroid/app/build.gradle 파일에 optional modules 를 추가해줘야 한다.

 

 

 

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:2.5.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:2.5.0'
  implementation 'com.facebook.fresco:webpsupport:2.5.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:2.5.0'
}

 

 

 

그리고 위 예시에서는 Image 컴포넌트가 아닌 ImageBackground 컴포넌트를 사용하였는데, 이는 Image 컴포넌트와 동일한 props 를 가진다. Image 컴포넌트에는 children 을 추가할 수 없기 때문에, children 을 추가해야하는 상황에서 ImageBackground 컴포넌트를 사용할 수 있다. 아래는 예시코드, 결과화면이다.

 

 

 

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;

 

 

result

 

 

 

 

 

 

Reference:

빠른 모바일 앱 개발을 위한 React Native