리액트 네이티브 (React Native, RN)

React Native | 안드로이드 GIF 이미지 적용하기

Valar 2021. 9. 9. 16:50
반응형

 


▶ 프레스코(Fresco)

React Native에서 gif 이미지 적용 시 IOS는 별도의 설정이 필요 없지만,

안드로이드는 fresco 라이브러리(페이스북이 만든 안드로이드 이미지 라이브러리)를 추가해야

정상적으로 작동한다.

 

1. build.gradle (Root : ~/android/app/build.gradle)
2개의 라이브러리를 추가한다.

 

implementation 'com.facebook.fresco:animated-gif:2.5.0'
implementation 'com.facebook.fresco:fresco:2.5.0'

 

 

2. 1번 방법으로 안될 경우에는 프로젝트 속성에서 직접 추가해준다.
프로젝트 우 클릭 > Open Module Settings

 

 

 

Dependencies > + > Library Dependency

 

 

 

라이브러리 하나씩 검색 후 추가한다.

com.facebook.fresco:animated-gif

com.facebook.fresco:fresco

 

 

 

오른쪽 Gradle탭에서 추가된 라이브러리들을 확인할 수 있다.

 

 

 

3. Image Tag에 이미지 넣는 방법

 

<Image
  source={require('./img.gif')} // (root local)
  // source={{uri: 'http://url/img.gif'}} // (http)
  width={200}
  height={200}
/>
반응형