Maison > Article > interface Web > 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('./reactlogo.png')} />
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: 'launcher_icon'}} 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: 'launcher_icon', 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: 'mipmap/launcher_icon', 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: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 38, height: 38}} />);
style :
largeur : définissez la largeur de l'image
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)
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: '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} ]} />
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)
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: 'transparent'}} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} > <Text style={styles.nestedText}> React </Text> </ImageBackground>
实现效果图如下,一般的我们可以嵌套ActivityIndicator来提示用户图片正在加载,当加载完成隐藏此控件。
网络图片加载监听
对于网络图片的加载,ReactNative提供了一些属性用于图片不同加载时期的监听。
onLoadStart:图片开始加载时调用
onLoad:图片加载完成时调用,此时图片加载成功
onLoadEnd:加载结束后调用,与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.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!