ReactNative Image 구성 요소 사용 설명

최근 에 ReactNative 를 공부 하면 서 재 미 를 느 꼈 습 니 다.공부 하 는 과정 에서 인터넷 에서 일부 사람들 이 쓴 글 의 내용 이 시대 에 뒤떨어 진 것 을 발 견 했 습 니 다.이것 은 주로 ReactNative 의 버 전이 너무 빨리 업그레이드 되 었 기 때 문 입 니 다.만약 에 지금 16 년 에서 15 년 동안 쓴 글 을 보면 지식 점 과 공식 문 서 를 비교 하면 크게 놀 라 게 될 것 입 니 다.그래서 ReactNative 를 공부 하고 싶 은 학생 들 에 게 학습 자 료 를 선택 할 때 반드시공식 문서과공식 데모을 기준 으로 다른 자 료 를 보조 로 해 야 한다 고 권 합 니 다.
이미지 구성 요소
ReactNative 에서 Image 는 그림 을 표시 하 는 구성 요소 로 Android 를 개발 할 때 ImageView 컨트롤 과 같은 효과 가 있 습 니 다.네트워크 그림,정적 자원,임시 로 컬 그림,로 컬 디스크 의 그림(예 를 들 어 앨범)등 을 표시 할 수 있 습 니 다.Image 구성 요 소 를 적절하게 사용 하면 사용자 에 게 더욱 이미지 있 고 직관 적 으로 정 보 를 전달 할 수 있다.
Image 구성 요소 로 딩 항목 의 정적 자원
이 곳 의 정적 자원 은 불 러 온 js 부분의 그림 을 말 합 니 다.안 드 로 이 드 가 아 닌 ios 원생 응용 자원 파일 입 니 다.이 그림 자원 을 불 러 오 는 데 있어 서 require('그림 파일 이 이 파일 디 렉 터 리 에 대한 경로')를 통 해 그림 파일 을 도입 하고 Image 구성 요소 의 source 속성 에 설정 하면 됩 니 다.아래 와 같다

 <Image
 style={styles.image}
  //  ./         ../    
   source={require('./reactlogo.png')}
 />

주의해 야 할 것 은 위의 require 에서 문자열 로 경 로 를 연결 할 수 없다 는 것 입 니 다.그렇지 않 으 면 오류 가 발생 할 수 있 습 니 다.
원본 이미지 자원 불 러 오기
여기 서 말 하 는 네 이 티 브 자원 은 우리 가 안 드 로 이 드 를 개발 할 때 res 디 렉 터 리 에 있 는 drawable 이나 mipmap 디 렉 터 리 를 말 합 니 다.ios 에 대응 하 는 자원 디 렉 터 리 입 니 다.이 그림 자원 을 불 러 오 는 것 과 불 러 오 는 항목 의 자원 이 조금 다 릅 니 다.안 드 로 이 드 를 예 로 들 면 drawable 에 있 는 파일 을 불 러 옵 니 다.

 <Image
 source={{uri: 'launcher_icon'}}
 style={{width: 38, height: 38}}
/>);

위 방식 으로 불 러 오 는 것 외 에 아래 방식 으로 도 불 러 올 수 있 습 니 다.

<Image
 source={nativeImageSource({
 android: 'launcher_icon',
 width: 96,
 height: 96
  })}
/>

nativeImageSource 에서 그림 의 너비 와 높이 를 지정 할 수 있 습 니 다.image 구성 요소 의 스타일 속성 style 에 너비 와 높이 를 동시에 설정 하면 최종 너비 와 높이 는 style 의 너비 와 높이 를 기준 으로 합 니 다.위 에 기본적으로 drawable 의 그림 자원 을 불 러 옵 니 다.mipmap 의 자원 을 불 러 오 려 면 다음 과 같 습 니 다.

<Image
 source={nativeImageSource({
 android: 'mipmap/launcher_icon',
 width: 96,
 height: 96
 })}
/>

위의 방식 을 통 해 우 리 는 그림 을 불 러 올 수 있 습 니 다.drawable 에 새로 추 가 된 그림 이 라면 다시 컴 파일 하여 실행 해 야 합 니 다.그렇지 않 으 면 유효 하지 않 습 니 다.
네트워크 그림 불 러 오기

 <Image
 source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
 style={{width: 38, height: 38}}
/>);

네트워크 그림 을 불 러 오 는 데 주의해 야 할 것 은 스타일 의 너비 와 높이 를 지정 해 야 한 다 는 것 입 니 다.그렇지 않 으 면 그림 이 표시 되 지 않 습 니 다(기본 너비 와 높이 를 0 으로 설정 하지 않 습 니 다).
Image 구성 요소 에서 자주 사용 하 는 속성
 style：

width:그림 의 너비 설정

height:그림 의 높이 설정

borderWidth:테두리 너비 설정

borderColor:테두리 색상 설정

backgroundColor:배경 색 설정(일부 그림 은 투명 배경 일 때 이 속성 을 사용 합 니 다)

opacity:불투명 도,값 은 0 에서 1 사이 이 고 1 은 불투명 함 을 나타 내 며 0 은 투명 함 을 나타 낸다.

tintColor:그림 에 착색 을 합 니 다.이 속성 은 용도 가 많 습 니 다.예 를 들 어 흑백 그림 은 클릭 할 때 다른 색상 그림 으로 변 합 니 다.이때 이 속성

을 사용 할 수 있 습 니 다.
blurRadius 그림 의 모호 한 반지름 을 설정 하여 그림 을 모호 하 게 할 수 있 습 니 다.
defaultSource 는 네트워크 가 성공 하기 전에 표 시 된 그림 을 불 러 오 는 데 기본 그림 을 설정 합 니 다.(ios 지원)
source
위 에서 우 리 는 source 속성 에 따라 서로 다른 그림 자원 을 불 러 오 는 것 을 소 개 했 지만,또 하 나 는 언급 하지 않 았 습 니 다.이것 은 하나의 배열 을 매개 변수 로 받 아들 일 수 있 습 니 다.이렇게 하면 구성 요소 의 너비 와 높이 에 따라 일치 하 는 너비 와 높 은 그림 을 자동 으로 불 러 올 수 있 습 니 다.사용 방식 은 다음 과 같다.

 <Image
  style={{flex: 1}}
  source={[
       {uri: 'https://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},
       {uri: 'https://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},     
        uri: 'https://facebook.github.io/react/img/logo_og.png', width: 400, height: 400}
      ]}
 />

resizeMode
이 속성 은 그림 의 크기 조정 모드 를 설정 하 는 데 사 용 됩 니 다.대응 값 은 다음 과 같 습 니 다.

cover:그림 의 너비 와 높이 를 유지 하고 너비 와 높이 가 용기 보기 와 같은 크기(아래 그림 효과 참조)

contain:그림 의 너비 와 높이 를 유지 하 는 전제 에서 그림 을 확대 하고 너비 와 높이 가 용기 보기 의 크기 보다 작 을 때 까지

stretch:그림 을 늘 리 고 너비 와 높이 를 유지 하지 않 으 며 너비 가 높 을 때 까지 용기

를 채 웁 니 다.

center 가 가운데 로 늘 어 나 지 않 음

repeat:용기 가 채 워 질 때 까지 평평 한 그림 을 반복 합 니 다.그림 은 원본 사 이 즈 를 유지 합 니 다.(iOS）

Android 에서 GIF 와 WebP 형식 그림 지원
기본적으로 Android 는 GIF 와 WebP 형식 을 지원 하지 않 습 니 다.build.gradle 파일 에 필요 에 따라 의존 도 를 추가 해 야 합 니 다.

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

 // For animated GIF support
 compile 'com.facebook.fresco:animated-gif:1.0.1'

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

 // For WebP support, without animations
 compile 'com.facebook.fresco:webpsupport:1.0.1'
}

GIF 와 함께 ProGuard 를 사용 했다 면 proguard-rules.pro 에 다음 규칙 을 추가 해 야 합 니 다.

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {
 public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);
}

ImageBackground
이 구성 요 소 는 Image 구성 요소 의 확장 입 니 다.구성 요 소 를 지원 합 니 다.그림 에 텍스트 를 표시 하면 다음 과 같이 이 루어 집 니 다.

      <ImageBackground
        style={{width: 100, height: 100, backgroundColor: 'transparent'}}
        source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
      >
        <Text style={styles.nestedText}>
          React
        </Text>
      </ImageBackground>

구현 효과 도 는 다음 과 같 습 니 다.일반적으로 Activity Indicator 를 삽입 하여 사용자 그림 이 불 러 오고 있 음 을 알려 줍 니 다.불 러 오기 가 완료 되면 이 컨트롤 을 숨 길 수 있 습 니 다.

네트워크 이미지 로드 감청
네트워크 그림 의 불 러 오기 에 대해 ReactNative 는 그림 의 불 러 오기 시기 에 따라 감청 하 는 속성 을 제공 합 니 다.

onLoadStart:그림 을 불 러 올 때 호출

onLoad:그림 불 러 오기 완료 시 호출 되 었 습 니 다.이때 그림 불 러 오기 성공

onLoad End:로 딩 이 끝 난 후에 호출 됩 니 다.onLoad 와 달리 성공 하 든 실패 하 든 이 반전 함수 가 실 행 됩 니 다.

사용 방법 은 아래 와 같다.

      <Image
        source={{uri:'https://facebook.github.io/react/img/logo_og.png'}}
        style={[styles.base, {overflow: 'visible'}]}
        onLoadStart={() => console.log('onLoadStart')}
        onLoad={(event) => console.log('onLoad') }
        onLoadEnd={() => console.log('onLoadEnd')}
      />

iOS 에 대해 서 는 로 딩 진도 의 리 셋 함수 인 onProgress 도 제공 합 니 다.

<Image
  style={styles.image}
  onProgress={(event) => {
   console.log('onProgress')
   this.setState({
    progress: Math.round(100 * event.nativeEvent.loaded / event.nativeEvent.total)
  })}}/>

인자 event.nativeEvent.loaded 를 통 해 불 러 온 크기 를 가 져 올 수 있 으 며,event.nativeEvent.totalk 을 통 해 그림 의 총 크기 를 가 져 올 수 있 습 니 다.
뿐만 아니 라 ReactNative 는 디스크 캐 시 에 그림 을 다운로드 할 수 있 도록 그림 함수 prefetch(url:string)를 미리 불 러 옵 니 다.

var prefetchTask = Image.prefetch('https://facebook.github.io/react/img/logo_og.png');
prefetchTask.then(() => {
  //       ，  Image  。               。       
  console.log('      ')
}, error => {
  console.log('      ')
})

자,오늘 여기까지 소개 하 겠 습 니 다.글 에 잘못된 부분 이 있 으 면 지적 해 주시 고 다시 한 번 감 사 드 립 니 다.글 의 일부 예제 소스 코드 는GitHub온라인 미리 보기 로 갈 수 있 고 프로젝트 를 다운로드 하여 다른 구성 요 소 를 배 울 수 있 습 니 다.
소스 코드 전송 도 어
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.