基础篇章：React Native 之 Image 的讲解

最新推荐文章于 2024-05-06 16:25:58 发布

公众号： DCOS

最新推荐文章于 2024-05-06 16:25:58 发布

阅读量663

点赞数

本文链接：https://blog.csdn.net/zouyee/article/details/52931808

版权

本文详细介绍了React Native中的Image组件，包括加载本地和远程图片、支持GIF和WebP的方法，以及组件的属性如onLoad、resizeMode等。通过实例展示了如何创建类似QQ页面的效果，鼓励读者实践操作并提供了相关学习资源。

摘要由CSDN通过智能技术生成

             
 
 
    
  
  
   【回复“ 1024 ”，送你一个特别推送】    
  
  
    
    
  
  
  （友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间）   
  
  
  今天一起来学习一些Image这个组件，它其实就是相当于我们android控件中的ImageView。   
  
  
  我们先看例子，看看加载本地图片和远程服务器图片的方式，其实差不多。   
  
  
      
   
    
    import React, { Component } from 'react' ;  
    import { AppRegistry, View, Image } from 'react-native' ;  
    class DisplayAnImage extends Component {  
   render() {
     
    return (  
    < View >  
    < Image  
    source = {require( './img/favicon.png' )}  
    />  
    < Image  
    style = {
    {width : 50 , height : 50 }}  
    source = {
    {uri : 'https://facebook.github.io/react/img/logo_og.png' }}  
    />  
    < /View>  
   ); 
   } 
   }    
  
  
     
  
  
  第一个就是直接在source里写相对路径，第二个就是直接写图片的服务器地址即可。   
  
  
  当然它也支持在android中显 示GIF 和 WebP 图片，方式如下：   
  
  
  
    在android/app/build.gradle中依赖下列开源库
 <span style="font-size: 10px;">dependencies { &nbsp;<br />// If your app supports Android versions before Ice Cream Sandwich (API &nbsp; &nbsp;level 14)<br />compile 'com.facebook.fresco:animated-base-support:0.11.0' &nbsp;<br />// For animated GIF support<br />compile 'com.facebook.fresco:animated-gif:0.11.0' &nbsp;<br />// For WebP support, including animated WebP<br />compile 'com.facebook.fresco:animated-webp:0.11.0' <br />compile 'com.facebook.fresco:webpsupport:0.11.0' &nbsp;<br />// For WebP support, without animations<br />compile 'com.facebook.fresco:webpsupport:0.11.0' <br />}</span>
 
    在proguard-rules.pro中配置防混淆
 <span style="font-size: 10px;">-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {<br />public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);<br />}</span>
 
     
  
  
  属性   
  
  
  
    onLayout function 布局发生变化时调用，参数为：{nativeEvent: {layout