Introduction détaillée au composant ReactNative Image

Cet article présente principalement l'explication détaillée de l'utilisation du composant ReactNative Image. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Cela a été très intéressant d'apprendre ReactNative récemment. Au cours du processus d'apprentissage, j'ai découvert que le contenu des articles écrits par certaines personnes sur Internet était obsolète. la version de ReactNative est mise à jour trop rapidement. Si vous lisez un article écrit il y a 16 ou même 15 ans maintenant et comparez les points de connaissances avec des documents officiels, vous serez surpris. Par conséquent, je conseille aux étudiants qui souhaitent apprendre ReactNative de choisir du matériel d'apprentissage basé sur des documents officiels et des démos officielles, ainsi que d'autres matériels comme suppléments.

Composant Image

Dans ReactNative, Image est un composant utilisé pour afficher des images, et a le même effet que le contrôle ImageView lors du développement d'Android. Il peut être utilisé pour afficher des images réseau, des ressources statiques, des images locales temporaires et des images sur le disque local (telles que des albums photo), etc. Une utilisation appropriée des composants Image peut transmettre des informations aux utilisateurs de manière plus vivante et intuitive.

Le composant Image charge les ressources statiques dans le projet

Les ressources statiques font ici référence aux images de la partie js qui sont chargées, aux ressources sous non Android, natives iOS applications, pour charger ce type de ressource image, nous introduisons le fichier image via require('le chemin du fichier image par rapport à ce répertoire de fichiers') et le définissons sur l'attribut source du composant Image. Comme suit

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

Une chose à noter est que le chemin ne peut pas être épissé avec des chaînes dans l'exigence ci-dessus, sinon une erreur de chargement sera signalée.

Charger les ressources d'images natives

Les ressources natives mentionnées ici font référence au drawable dans le répertoire res lorsque nous développons Android, ou au répertoire mipmap. Et le répertoire de ressources correspondant sous ios. Le chargement de ce type de ressources d'image est un peu différent du chargement de ressources dans le projet. Ici, en prenant Android comme exemple, chargez le fichier sous drawable comme suit

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

. En plus de la méthode ci-dessus, le chargement peut également être effectué de la manière suivante

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

La largeur et la hauteur de l'image peuvent être spécifiées dans nativeImageSource Si la largeur et la hauteur. La hauteur est définie dans l'attribut de style du composant image en même temps, la largeur et la hauteur finales sont la largeur et la hauteur dans le style prévaudront. Les ressources d'image sous drawable sont chargées par défaut ci-dessus. Si vous souhaitez charger les ressources dans mipmap, vous pouvez procéder comme suit, si l'image est nouvellement ajoutée au drawable, elle doit être recompilée et exécutée, sinon cela ne prendra pas. effet.

Chargement des images réseau

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

Une chose à noter concernant le chargement des images réseau est que vous devez spécifier la largeur et hauteur du style, sinon l'image ne sera pas affichée (la largeur et la hauteur par défaut ne seront pas définies sur 0).

Attributs couramment utilisés du composant Image

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

style :

largeur : définissez la largeur de l'image

hauteur : Définir la hauteur de l'image
borderWidth : Définir la largeur de la bordure
borderColor : Définir la couleur de la bordure
backgroundColor : Définir la couleur d'arrière-plan (cet attribut est généralement utilisé lorsque certaines images ont un arrière-plan transparent)
opacité : opacité, La valeur est comprise entre 0 et 1, 1 indiquant opaque et 0 indiquant transparent.
tintColor : Colore l'image. Cet attribut est davantage utilisé. Par exemple, une image en noir et blanc se transformera souvent en une autre image couleur lorsque vous cliquerez sur cet attribut.
blurRadius définit le rayon de flou de l'image, ce qui peut rendre l'image floue

• defaultSource définit l'image par défaut de l'image, qui est utilisée pour afficher l'image avant le le réseau est chargé avec succès. (support iOS)

source

Ci-dessus, nous avons introduit l'attribut source pour charger différentes ressources d'image, mais il y en a un autre que nous n'avons pas encore mentionné. Il peut recevoir un tableau en paramètre, afin qu'il puisse être chargé en fonction du composant. La largeur et la hauteur chargent automatiquement l'image avec la largeur et la hauteur correspondantes. L'utilisation est la suivante

resizeMode

Cet attribut est utilisé pour définir le mode de zoom de l'image, la valeur correspondante est comme suit

 <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}
      ]}
 />

couverture : Conservez le rapport hauteur/largeur de l'image jusqu'à ce que la largeur et la hauteur soient supérieures ou égales à la taille de la vue du conteneur (reportez-vous à l'effet ci-dessous)

contenir : conserver la largeur et la hauteur de l'image. Mettre à l'échelle l'image en partant du principe de conserver le rapport jusqu'à ce que la largeur et la hauteur soient inférieures ou égales à la taille de la vue du conteneur
étirer : étirer l'image sans conserver les proportions jusqu'à ce que la largeur et la hauteur remplissent simplement le conteneur
centrer centrée sans étirer
répéter : répétez l'image jusqu'à ce que le conteneur soit rempli. L'image conservera sa taille d'origine. (iOS)

Prend en charge les images au format GIF et WebP sur Android

Android le fait par défaut ne prend pas en charge les formats GIF et WebP. Vous devez ajouter les dépendances correspondantes selon vos besoins dans le fichier build.gradle.

Si vous utilisez ProGuard tout en utilisant GIF, vous devez ajouter les règles suivantes à proguard-rules.pro

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!