ReactNative Image 컴포넌트에 대한 자세한 소개

이 글은 주로 ReactNative Image 컴포넌트의 사용법에 대한 자세한 설명을 소개하는 글입니다. 에디터가 꽤 괜찮다고 생각해서 이제 공유하고 참고용으로 올려보겠습니다. 편집자를 따라가서 살펴봅시다

최근 ReactNative를 배우는 것이 꽤 흥미로웠습니다. 학습 과정에서 인터넷에서 일부 사람들이 작성한 기사의 내용이 오래되었다는 것을 발견했습니다. 이는 주로 ReactNative 버전이 다르기 때문입니다. 너무 빨리 업그레이드되었습니다. 지금 읽으면 16년, 심지어 15년 전에 작성된 기사를 공식 문서와 비교해 보면 놀랄 것입니다. 따라서 ReactNative를 배우려는 학생들에게는 공식 문서 및 공식 데모를 기반으로 한 학습 자료와 보충 자료를 선택하는 것이 좋습니다.

Image 컴포넌트

ReactNative에서 Image는 이미지를 표시하는 데 사용되는 컴포넌트로, Android 개발 시 ImageView 컨트롤과 동일한 효과를 갖습니다. 네트워크 이미지, 정적 리소스, 임시 로컬 이미지, 로컬 디스크의 이미지(예: 사진 앨범) 등을 표시하는 데 사용할 수 있습니다. 이미지 구성 요소를 적절하게 사용하면 사용자에게 정보를 보다 생생하고 직관적으로 전달할 수 있습니다.

이미지 구성 요소는 프로젝트의 정적 리소스를 로드합니다.

여기서 정적 리소스는 로드된 js 부분의 이미지, Android가 아닌 iOS 기본 애플리케이션의 리소스 파일을 참조하여 이러한 이미지 리소스를 로드하려면 require를 전달합니다. ('이 파일 디렉토리에 대한 이미지 파일의 경로') 이미지 파일을 소개하고 이를 이미지 구성 요소의 소스 속성으로 설정합니다. 아래와 같이

 <Image
 style={styles.image}
  //  ./表示当前文件目录 ../ 父目录
   source={require(&#39;./reactlogo.png&#39;)}
 />

한 가지 주의할 점은 위의 require에서 문자열로 경로를 이어붙일 수 없다는 점입니다. 그렇지 않으면 로딩 오류가 보고됩니다.

네이티브 이미지 리소스 로드

여기서 언급하는 네이티브 리소스는 Android 개발 시 res 디렉터리에 있는 drawable이나 Mipmap 디렉터리를 참조합니다. 그리고 ios 아래에 해당 리소스 디렉터리가 있습니다. 이런 종류의 이미지 리소스를 로드하는 것은 프로젝트에서 리소스를 로드하는 것과 약간 다릅니다. 여기서는 Android를 예로 들어 다음과 같이 drawable 아래에 파일을 로드합니다.

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

위 방법을 통해 로드하는 것 외에도 다음 방법을 통해 로드하세요

<Image
 source={nativeImageSource({
 android: &#39;launcher_icon&#39;,
 width: 96,
 height: 96
  })}
/>

이미지의 너비와 높이는 NativeImageSource에서 지정할 수 있습니다. 이미지 컴포넌트의 스타일 속성에 너비와 높이를 동시에 설정하면 최종 너비와 높이가 적용됩니다. 스타일의 너비와 높이에. 위에서 드로어블 아래의 이미지 리소스는 기본적으로 로드됩니다. 밉맵에 리소스를 로드하려면 다음과 같이 하면 됩니다

<Image
 source={nativeImageSource({
 android: &#39;mipmap/launcher_icon&#39;,
 width: 96,
 height: 96
 })}
/>

위 방법을 통해 새로 추가된 이미지인 경우 로드할 수 있습니다. 드로어블에서는 다시 로드하고 실행해야 합니다. 그렇지 않으면 적용되지 않습니다.

네트워크 이미지 로드

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

네트워크 이미지 로드에 관해 주의할 점은 스타일의 너비와 높이를 지정해야 한다는 것입니다. 그렇지 않으면 이미지가 표시되지 않습니다(기본 너비와 높이는 지정되지 않습니다). 0)으로 설정합니다.

이미지 구성 요소에서 일반적으로 사용되는 속성

style:

• width: 이미지의 너비를 설정합니다.

• height: 이미지의 높이를 설정합니다.

• borderWidth: 테두리를 설정합니다. width

• borderColor: 테두리 색상을 설정합니다.

• backgroundColor: 배경색을 설정합니다. (이 속성은 일반적으로 일부 사진의 배경이 투명한 경우에 사용됩니다.)

• opacity: 불투명도, 값은 0에서 1 사이입니다. 1은 불투명, 0은 불투명, 투명을 의미합니다.

• tintColor: 이 속성은 유용합니다. 예를 들어 흑백 사진을 클릭하면 다른 컬러 사진으로 바뀌는 경우가 많습니다. 이 경우

blurRadius 속성을 사용하여 흐림 효과를 설정할 수 있습니다. 흐려질 수 있는 사진의 반경 Picture

defaultSource는 네트워크를 성공적으로 로드하기 전에 사진을 표시하는 데 사용되는 사진의 기본 사진을 설정합니다. (ios 지원)

source

위에서는 다양한 이미지 리소스를 로드하기 위한 source 속성을 소개했지만 아직 언급하지 않은 또 다른 속성이 있습니다. 배열을 매개변수로 수신하여 그에 따라 자동으로 로드할 수 있습니다. 구성 요소의 너비와 높이를 이미지의 너비와 높이와 일치시킵니다. 사용법은 다음과 같습니다

 <Image
  style={{flex: 1}}
  source={[
       {uri: &#39;https://facebook.github.io/react/img/logo_small.png&#39;, width: 38, height: 38},
       {uri: &#39;https://facebook.github.io/react/img/logo_small_2x.png&#39;, width: 76, height: 76},     
        uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;, 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: &#39;transparent&#39;}}
        source={{uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;}}
      >
        <Text style={styles.nestedText}>
          React
        </Text>
      </ImageBackground>

实现效果图如下，一般的我们可以嵌套ActivityIndicator来提示用户图片正在加载，当加载完成隐藏此控件。

网络图片加载监听

对于网络图片的加载，ReactNative提供了一些属性用于图片不同加载时期的监听。

• onLoadStart：图片开始加载时调用

• onLoad：图片加载完成时调用，此时图片加载成功

• onLoadEnd：加载结束后调用，与onLoad不同的是不论成功还是失败，此回调函数都会被执行。

使用方法如下

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

对于iOS，还提供了加载进度的回调函数onProgress

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

可以通过参数event.nativeEvent.loaded获取已经加载的大小，通过event.nativeEvent.total获取图片的总大小。

不仅如此，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在线预览，也可以下载项目学习其他组件。

위 내용은 ReactNative Image 컴포넌트에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!