React에서 GIF 파일 사용하는 방법

Android에서는 기본적으로 GIF와 WebP 형식을 지원하지 않는다. 

따라서, 리액트에서 이미지를 호출하는 아래와 같은 일반적인 방식으로는 작동하지 않는다.

 

<Image style={styles.image} source={{uri: XXXXX`}} />

리액트에서는 android/app/build.gradle 파일에 몇 가지 모듈을 추가해줌으로써, 이러한 제약을 극복할 수 있다.

// 이 dependencies는 내 앱이 필요로하는 어떤,,, 그런 모듈들의 모음이라 할 수 있다.

dependencies {

  // If your app supports Android versions before Ice Cream Sandwich (API level 14)

  compile 'com.facebook.fresco:animated-base-support:0.11.0'

  // For animated GIF support

  compile 'com.facebook.fresco:animated-gif:0.11.0'

  // For WebP support, including animated WebP

  compile 'com.facebook.fresco:animated-webp:0.11.0'

  compile 'com.facebook.fresco:webpsupport:0.11.0'

  // For WebP support, without animations

  compile 'com.facebook.fresco:webpsupport:0.11.0'

}

솔직히 이 빨간색만 있어도 GIF를 불러올 수 있다.

이렇게 하면, 비어있던 화면에 이미지가 나오는 것을 볼 수 있다.

기쁘다. 보인다. ㅋ 

아.. 그외에도 잘 모르지만 Webp라는 형식도 마찮가지로 지원을 해준다고 한다.

이게 뭐냐면 손실 압축 이미지 파일을 위한 이미지 포맷이라고 한다. JPEG형식이 손실이 크므로 구글이 만든 이미지형식이라고 한다. 안 써봤고, 쓸일이 없으므로 이상으로 블로그 끝.