组件Image的使用

一、组件Image

  1. 在开发中有一个非常重要的组件Image,通过这个组件可以展示各种各样的图片，而且在React Native中该组件可以通过多种方式加载图片资源

  2. 从当前RN项目中加载图片

       <Image source={require("./img/2.png")} >

      1) RN中引入其他文件中的内容基本都是使用require引用，图片也不例外

      2) require后面的路径跟img中src中的路径原理基本一样，但有两比较重要的点

         a) 同级目录的话require的做法是在路径前加[./]来标识，如下图的引入方式为

            见《图片路径和image中source的关系》

             <Image source={require("./img/2.png")} />


       3) 在html中img中src的路径是可以拼接的，但rn中使用require引入图片的话路径目前是不可拼接的。比如如下的两种写法就会报错

          var imgSrc = "./img/2.png";
          //错误示范1
          <Image source={require(imgSrc )}>
          //错误示范2
          var imgName = "2.png";
          <Image source={require("./img/"+imgName)}>

       4) React Native的Packager会根据平台选择相应的文件，例如：my_icon.ios.png和my_icon.android.png两个文件，加载时会根据平台选择相应的文件

  3. 从Android或iOS项目中加载图片

       <View>
               <Image source={{uri:"1.jpg"}) style={{width:50,height:50}}}
       </View>

       1) 必须将图片放到iOS项目中的asset文件夹或者Android drawable文件夹(如果不知道这两个文件，自行百度)，当项目在iOS端运行时会自动加载asset中的图片，在android端运行时会自动加载drawable中的图片

   4. 加载来自网络的图片

        跟加载iOS项目和android项目中图片的方式一样，只不过，加载网络中的图片时，需要指定一下图片的尺寸

          <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{width:200, height:100}}/>


   5. 注意

        当你在android和iOS项目中增加图片后，仅仅reload, 图片是无法显示的，你必须要重新安装这个软件

   6. Image组件常用属性

        onLayout(function)

              当Image布局发生改变时，会调用该方法

        onload(function)

            当图片加载成功之后，回调该方法

        onloadEnd(function)

            当图片加载完成回调该方法，不会管图片加载成功还是失败

        onloadStart(function)

            当图片开始加载时调用该方法

        resizeMode

            Image.resizeMode.cover：   图片居中显示，没有被拉伸，超出部分被截断；
            Image.resizeMode.contain： 容器完全容纳图片，图片等比例进拉伸；
            Image.resizeMode.stretch： 图片被拉伸适应容器大小，有可能会发生变形

        source

            进行标记图片的引用，该参数可以作为一个网络url地址或者一个本地的路径