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

发布时间：2020-12-15 05:15:22 所属栏目：百科来源：网络整理
导读：【回复“ 1024 ”，送你一个特别推送】（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间）今天一起来学习一些Image这个组件，它其实就是相当于我们android控件中的ImageView。我们先看
             
 
    
  
   【回复“ 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: {x,y,width,height}}}.
  
    onLoad function 图片加载成功时回调该方法。
  
    onLoadEnd function 加载结束后，不管成功与否，都回调该方法。
  
    onLoadStart function 顾名思义，加载开始时调用。
  
    resizeMode enum('cover','contain','stretch') 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。
  
    source {uri: string} uri是一个表示图片的资源标识的字符串，它可以是一个http地址或是一个本地文件路径（使用require(相对路径)来引用）。
  
     
  
  Image的style   
  
   
    backfaceVisibility ['visible','hidden'] 隐藏或者显示
  
    backgroundColor color 背景色
  
    borderBottomLeftRadius 左下角圆角大小
  
    borderBottomRightRadius
  
    borderColor color 边框颜色
  
    borderRadius 边框圆角
  
    borderTopLeftRadius
  
    borderTopRightRadius
  
    borderWidth number 边框宽度
  
    opacity 设置透明度
  
    overflow ['visible','hidden'] 设置图片尺寸超过容器可以设置显示或者隐藏
  
    resizeMode 图片调整模式
  
    tintColor color 颜色设置
  
    overlayColor 当图片圆角显示时，剩余空间设置的颜色，android独有
  
     
  
  例子实践   
  
  看看我模仿的QQ上的一个页面，漂不漂亮？说实话，敲代码这个东西，还得实践，看看这个效果，通过这几篇简单的学习，你能实现吗？   
  
  效果图   
  
       
  
  例子代码   
  
   
     import React,{ Component } from 'react' ; 
  import { 
 AppRegistry,
 StyleSheet,
 Text,
 View,
 Image
  } from 'react-native' ; 
  class ImageDemo extends Component { 
 render() {
  return ( 
  < View style = {styles.container} > 
  < View style = {styles.title_view} > 
  < Text style = {styles.title_text} > 
 空间动态
  < /Text> 
  < /View> 
  < View style = {styles.three_image_view} > 
  < View style = {styles.vertical_view} > 
  < Image source = {require( './img/igs.png' )} style = {{alignSelf : 'center',width : 45,height : 45 }} /> 
  < Text style = {styles.top_text} > 
 好友动态
  < /Text> 
  < /View> 
  < View style = {styles.vertical_view} > 
  < Image source = {require( './img/eqc.png' )} style = {{alignSelf : 'center',height : 45 }} /> 
  < Text style = {styles.top_text} > 
 附近
  < /Text> 
  < /View> 
  < View style = {styles.vertical_view} > 
  < Image source = {require( './img/iei.png' )} style = {{alignSelf : 'center',height : 45 }} /> 
  < Text style = {styles.top_text} > 
 兴趣部落
  < /Text> 
  < /View> 
  < /View> 
  < View style = {{height : 30,backgroundColor : '#f9f9fb' }} /> 
  < View style = {styles.rectangle_view} > 
  < View style = {{flexDirection : 'row',alignItems : 'center' }} > 
  < Image source = {require( './img/nsa.png' )} style = {{alignSelf : 'center',width : 30,height : 30 }} /> 
  < Text style = {styles.rectangle_text} > 
 羽毛球
  < /Text> 
  < /View> 
  < Image source = {require( './img/ppe.png' )} style = {{alignSelf : 'center',width : 20,height : 20 }} /> 
  < /View> 
  < View style = {styles.rectangle_view} > 
  < View style = {{flexDirection : 'row',alignItems : 'center' }} > 
  < Image source = {require( './img/nsb.png' )} style = {{alignSelf : 'center',height : 30 }} /> 
  < Text style = {styles.rectangle_text} > 
 火车票
  < /Text> 
  < /View> 
  < Image source = {require( './img/ppe.png' )} style = {{alignSelf : 'center',alignItems : 'center' }} > 
  < Image source = {require( './img/nrz.png' )} style = {{alignSelf : 'center',height : 30 }} /> 
  < Text style = {styles.rectangle_text} > 
 视频
  < /Text> 
  < /View> 
  < Image source = {require( './img/ppe.png' )} style = {{alignSelf : 'center',height : 20 }} /> 
  < /View> 
  < /View> 
 );
 }
 }
  const styles = StyleSheet.create({ 
  container : { 
  flex : 1,
  backgroundColor : 'white',
 },
  title_view : { 
  flexDirection : 'row',
  height : 50,
  justifyContent : 'center',
  alignItems : 'center',
  backgroundColor : '#27b5ee',
  title_text : { 
  color : 'white',
  fontSize : 20,
  textAlign : 'center' 
 },
  three_image_view : { 
  paddingTop : 15,
  flexDirection : 'row',
  justifyContent : 'space-around',
  vertical_view : { 
  justifyContent : 'center',
  paddingBottom : 15,
  top_text : { 
  marginTop : 5,
  color : 'black',
  fontSize : 16,
  rectangle_view : { 
  paddingTop : 8,
  paddingBottom : 8,
  paddingLeft : 15,
  paddingRight : 15,
  justifyContent : 'space-between',
  borderBottomColor : '#dedfe0',
  borderBottomWidth : 1,
  rectangle_text : { 
  color : 'black',
  textAlign : 'center',
  paddingLeft : 8,
 });
 AppRegistry.registerComponent( 'ImageDemo' ,()
 =>
 ImageDemo);
  
     
  
  最后我想说，不懂的可以留言，或者去我的微信公众号下面留言，评论，一起交流学习。我的微信公众号：非著名程序员。   
  
  相关推荐：   
  
   环境配置:React Native 开发环境配置 For Android （可点击）    
  
    环境配置：React Native智能开发工具，可代码提醒的IDE—VS Code (可点击)     
  
    基础篇章：关于 React Native 的props，state，style的讲解 （可点击）     
  
    基础篇章：React Native之Flexbox的讲解（Height and Width） （可点击）     
  
    基础篇章：React Native 之 View 和 Text 的讲解 （可点击）     
  
    基础篇章：React Native 之 TextInput 的讲解 (可点击)     
  
   ● ● ●    
  
  掘金是一个高质量的技术社区，从 RxJava 到 Android Studio，性能优化到优秀开源库，让你不错过 Android 开发的每一个技术干货。长按图片二维码识别或者各大应用市场搜索「掘金」，技术干货尽在掌握中。   
  
       
  
   点击 阅读原文 ，了解详情。   
 
 
         

查看原文：http://www.zoues.com/2016/10/26/%e5%9f%ba%e7%a1%80%e7%af%87%e7%ab%a0%ef%bc%9areact-native-%e4%b9%8b-image-%e7%9a%84%e8%ae%b2%e8%a7%a3/
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!