Detailed introduction to ReactNative Image component

This article mainly introduces the detailed explanation of the use of ReactNative Image component. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

It’s been quite interesting to learn ReactNative recently. During the learning process, I found that the content of articles written by some people on the Internet is outdated. This is mainly because the version of ReactNative is upgraded too quickly. If you now read an article written in 16 or even 15 years, and compare the knowledge points with official documents, you will be surprised. Therefore, I advise students who want to learn ReactNative to choose learning materials based on official documents and official demos, and other materials as supplements.

Image component

In ReactNative, Image is a component used to display images, which has the same effect as the ImageView control when developing Android. It can be used to display network images, static resources, temporary local images, and images on the local disk (such as photo albums), etc. Proper use of Image components can convey information to users more vividly and intuitively.

Image component loads static resources in the project

The static resources here refer to the images in the js part that are loaded, and are not resources under native applications of android and ios file, to load this kind of image resource, we introduce the image file through require('the path of the image file relative to this file directory') and set it to the source attribute of the Image component. As follows

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

One thing to note is that the path cannot be spliced ​​with strings in the above require, otherwise a loading error will be reported.

Loading native image resources

The native resources mentioned here refer to the drawable in the res directory when we develop Android, or the mipmap directory. And the corresponding resource directory under ios. Loading this kind of image resources is a little different from loading resources in the project. Here we take android as an example. Load the file under drawable as follows

##

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

In addition to loading through the above method, You can specify the image width and height in the nativeImageSource in the following way

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

. If you set the width and height in the style attribute of the image component at the same time, the final width and height will be based on the style medium width. Whichever is higher. The image resources under drawable are loaded by default above. If you want to load the resources in mipmap, you can do as follows

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

Through the above method, we can load the image. If The pictures newly added to the drawable need to be recompiled and run, otherwise they will not take effect.

Loading network images

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

One thing to note about loading network images is that you need to specify the width and height of the style, otherwise The image will not be displayed (the default width and height are not set to 0 anymore).

Commonly used attributes of the Image component

style:

• width: Set the width of the image

• height: Set the height of the picture

• borderWidth: Set the border width

• borderColor: Set the border Color

• backgroundColor: Set the background color (this property is generally used when some pictures have transparent backgrounds)

• opacity: Opacity, The value is between 0 and 1, where 1 means opaque and 0 means transparent.

• tintColor: Colorize the picture. This attribute is more useful. For example, a black and white picture will often turn into another color picture when clicked. This attribute can be used at this time

blurRadius Sets the blur radius of the image, which can blur the image

defaultSource Sets the default image for the image, which is used to display the image before the network is successfully loaded. (ios support)

source

Above we introduced the source attribute to load different image resources, but there is another one we haven’t mentioned yet. It can receive an array as a parameter, so that it can be loaded according to the component. The width and height automatically load the image with matching width and height. The usage is as follows

 <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

This attribute is used to set the zoom mode of the image, the corresponding value is as follows

• cover: Maintain the aspect ratio of the image until the width and height are greater than or equal to the size of the container view (refer to the effect below)

• contain: Maintain the aspect ratio of the image Under the premise, scale the image until the width and height are less than or equal to the size of the container view

• stretch: Stretch the image without maintaining the aspect ratio until the width and height just fill the container

• center Center without stretching

• repeat: Repeat tile the image until it fills the container. The image will maintain its original size. (iOS)

## Supports GIF and WebP format images on Android

Default Android does not support GIF and WebP formats. You need to add the corresponding dependencies as needed in the build.gradle file.

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'
}

If you use ProGuard while using GIF, you need to add the following rules to 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在线预览，也可以下载项目学习其他组件。

The above is the detailed content of Detailed introduction to ReactNative Image component. For more information, please follow other related articles on the PHP Chinese website!