【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)

转载请标明出处：

http://blog.csdn.net/developer_jiangqq/article/details/50557632

本文出自:【江清清的博客】

(一)前言

        【好消息】个人站点已经上线执行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:http://www.lcode.org 

      今天我们一起来看一下Image组件的相关使用解说以及模仿实现一下美团首页顶部分类的效果。详细环境搭建以及相关配置的请查看之前的相关文章。

        刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

         Image是一个现实多种不同类型图片的React组件，能够进行载入网络图片，本地资源图片,打包的APP中的图片资源，以及磁盘比如:相冊中的图片。

(二)Image基本使用方法

         2.1.载入项目资源图片

从0.14版本号開始react native支持载入我们项目目录中的图片资源。我如今在測试项目中创建一个img目录，在里边增加my_icon.png图片.。那么能够通过以下方式进行訪问:

 <View style={{marginLeft:10,marginTop:10}}>
       <Text style={{fontSize:16}}>'測试本地图片'</Text>
       <Image source={require('./img/my_icon.png')} />
      </View>

执行结果例如以下:

         该图片资源文件的查找和JS模块类似，该会依据填写的图片路径相对于当前的js文件路径进行搜索。RN更加好的是Packager会依据平台选择对应的文件，比如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios)。

该会依据android或者ios平台选择对应的文件。

        对于iOS开发来讲，大家肯定会知道我们常常能够设置@2X，@2X等格式的图片来进行适配手机屏幕，比如:my_icon@2x.png或者my_icon@3x.png。这种话Packager进行打包的时候会依据屏幕的不同密度进行选择显示对应的图片。

假设没有恰好的满足当前屏幕的分辨率，那么会选择最接近的那个图片资源。

         [注意].这边使用Image组件，require中的图片名称必须为一个静态的字符串信息。不能在require中进行拼接。比如:

 <Image source={require('./img/my_icon'+'.png')} />

这样之后执行就报错了:

   

      2.2.载入使用APP中的图片

  现阶段做原生APP的需求还是比較多的。只是如今使用了React  Native之后，我们能够进行混合开发APP(一部分採用ReactNative。还有一部分採用原生平台代码).甚至能够使用已经打包在APP中的图片资源(比如:xcode asset目录以及Android drawable目录)

 比如例如以下代码我们获取android项目中的app_icon图片，而且设置图片的尺寸带40x40

<Image source={{uri:'ic_launcher'}} style={{ 40, height: 40}} />

           只是假设要显示效果：希望大家做例如以下改动，由于如今android项目採用gradle，如今不会默认生成drawable目录中了，所以大家假设要演示效果，须要在res以下新建一个drawable目录，然后放一个图片进入。接着在又一次打包执行就可以(这边測试的是把ic_launcher.png图片放入到res/drawable目录中)。

只是经測试drawable-hdpi这类的不同分辨率格式目录也能够执行。

该适用于调试版本号，假设採用公布版本号就须要比如'image!xx.png'格式的訪问方式了

执行效果例如以下:

      2.2.载入使用APP中的图片

 client的非常多图片资源基本上都是实时通过网络进行获取的，该写法和上面的载入本地资源图片的方式不太一样，这边一定须要指定图片的尺寸大小,详细代码演示样例代码例如以下:

<Image source={{uri:'http://img2.xxh.cc:8080/images/ZTT_1404756641470_image.jpg'}}  style={{100,height:100}}/>

载入网络图片效果例如以下:

     2.3.Image实现某些控件的背景图效果

 React Native中支持嵌套的方式，比如我们如今有一个Text组件。假如要实现背景图的效果，那么能够使用Image嵌套的Text的方式，然后Image载入图片方式实现,比如代码例如以下:

<Image source={require('./img/my_icon.png')} >
           <Text style={{color:'red'}}>以下是背景图</Text>
</Image>

详细掩饰效果例如以下：我们发现Text组件文本底部是一个图片的背景

(三)Image属性方法

       1.onLayout   (function) 当Image布局发生改变的，会进行调用该方法，调用的代码为:

{nativeEvent:{layout: {x, y, width, height}}}.

       2.onLoad (function):当图片载入成功之后，回调该方法

       3.onLoadEnd (function):当图片载入失败回调该方法。该不会管图片载入成功还是失败

       4.onLoadStart (fcuntion):当图片開始载入的时候调用该方法

       5.resizeMode  缩放比例,可选參数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会依据设置Mode进行缩放或者裁剪图片

       6.source {uri:string} 进行标记图片的引用，该參数能够为一个网络url地址或者一个本地的路径    

(四)Image样式风格

       1.FlexBox  支持弹性盒子风格

       2.Transforms  支持属性动画                3.resizeMode  设置缩放模式

       4.backgroundColor 背景颜色

       5.borderColor     边框颜色              6.borderWidth 边框宽度

       7.borderRadius  边框圆角   

       8.overflow 设置图片尺寸超过容器能够设置显示或者隐藏('visible','hidden')

       9.tintColor  颜色设置         10.opacity 设置不透明度0.0(透明)-1.0(全然不透明)

(五)Image实例-仿照美团首页顶部分类

       以下我们模仿一下美团首页的顶部分类的效果，也算是总结了前面所学的View。Text和今天的Image组件。详细代码例如以下:

/**
 * 模仿美团首页顶部分类效果
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
} from'react-native';
class TestImage extends Component {
  render() {
    return (
      <View style={{marginLeft:5,marginTop:10,marginRight:5}}>
     
         <View style={{flexDirection:'row'}}>
             <View style={{70}}>
                 <Image source={require('./img/one.png')} style={{alignSelf:'center',45,height:45}} />
                 <Text style={{marginTop:5,textAlign:'center',fontSize:11,color:'#555555'}}>美食</Text>
             </View>
              <View style={{70}}>
                 <Image source={require('./img/two.png')} style={{alignSelf:'center',45,height:45}} />
                 <Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>电影</Text>
             </View>
             <View style={{70}}>
                 <Image source={require('./img/three.png')} style={{alignSelf:'center',45,height:45}} />
                 <Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>酒店</Text>
             </View>
             <View style={{70}}>
                 <Image source={require('./img/four.png')} style={{alignSelf:'center',45,height:45}} />
                 <Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>KTV</Text>
             </View>
             <View style={{70}}>
                 <Image source={require('./img/five.png')} style={{alignSelf:'center',45,height:45}} />
                 <Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>外卖</Text>
             </View>
          </View>
          <View style={{flexDirection:'row',marginTop:10}}>
             <View style={{70}}>
                 <Image source={require('./img/six.png')} style={{alignSelf:'center',45,height:45}} />
                 <Text style={{marginTop:5,textAlign:'center',fontSize:11,color:'#555555'}}>优惠买单</Text>
             </View>
              <View style={{70}}>
                 <Image source={require('./img/seven.png')} style={{alignSelf:'center',45,height:45}} />
                 <Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>周边游</Text>
             </View>
             <View style={{70}}>
                 <Image source={require('./img/eight.png')}style={{alignSelf:'center',45,height:45}} />
                 <Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>休闲娱乐</Text>
             </View>
             <View style={{70}}>
                 <Image source={require('./img/nine.png')} style={{alignSelf:'center',45,height:45}} />
                 <Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>今日新单</Text>
             </View>
             <View style={{70}}>
                 <Image source={require('./img/ten.png')} style={{alignSelf:'center',45,height:45}} />
                 <Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>丽人</Text>
             </View>
          </View>
      </View>
    );
  }
}
AppRegistry.registerComponent('TestImage',() => TestImage);

注以上的代码的样式没有重构 单独用StyleSheet写。详细执行效果例如以下：

(六)最后总结

          今天我们主要给大家介绍Image组件，以及通过一个详细实例把之前的View和Text组件的基本使用串联了一下。

大家有问题能够加一下群React Native技术交流群(282693535)或者底下进行回复一下。

          尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq） 侵权必究！

       关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

     关注我的微博，能够获得很多其它精彩内容