zoukankan      html  css  js  c++  java
  • React Native之Image组件

      同 HTML 的 img 元素一样,React Native 提供的 Image 组件可以用来显示各种途径的图片,比如网络图片、本地图片、照相机图片等。
      虽然效果是一样的。然而用法还是有区别的。

      1、src属性改为了source属性。

      在web中,如果加载图片会使用img标签,其中src属性用来指定图片的地址。而在React Native中,使用Image组件来加载图片,src属性也变为了source属性,而且不接受字符串,值是一个带有uri属性的对象。

      2、必须声明图片的宽、高(限网络图片)。

      在web中,加载图片可以不必规定图片的宽、高,如果不设置那么会以图片的原始尺寸来显示;如果设置,可以只设置一个值,这时,图片会等比例缩放;如果设置两个值的话,则会根据规定尺寸来显示图片。而在React Native中,如果是加载网络图片时,必须声明图片的宽和高,否则图片不会显示。

      3、宽高为逻辑像素点(不带单位)。

      React Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。只能使用数值,不带任何单位。

      4、加载图片的方式与原来不同。

      在使用Image组件加载图片时,可分为网络图片和本地图片,如果是加载本地图片,使用require('string') 来包裹,string表示图片本地路径。

      如果是加载网络图片,则使用uri:'string' ,string表示网络图片的地址。

      

      例如,要加载一幅网络图片,可以这样写:

    <Image source={{uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=991823527,956610122&fm=27&gp=0.jpg'}} style={{200,height:180}}/>
    

      

      当然也可以这样写:

    // render后:
    let pic = {
     uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=991823527,956610122&fm=27&gp=0.jpg'
    };
    
    // return后
    <Image source={pic} style={{200,height:180}}/>
    

      

      加载本地图片:

    <Image source={require('./images/105.jpg')} style={{200,height:180}} />

      如果不限制尺寸,则显示图片的原始尺寸,此处与加载网络图片有所不同,可以不必规定图片尺寸,如果是加载网络图片,必须规定图片的宽高,否则图片不显示。

      5、Image标签必须闭合,否则会报错

  • 相关阅读:
    anaconda环境---ubuntu下重装
    算法---Face_Recognition配置实战篇
    算法---FaceNet+mtcnn的使用记录
    算法---FaceNet理论学习篇
    算法---FaceNet在Tf下的实战篇
    ubuntu系统---切换Py2.X与Py3.X版本
    anaconda环境中---py2.7下安装tf1.0 + py3.5下安装tf1.5
    Git---初入开源代码管理库的学习过程003
    day 87 Vue学习六之axios、vuex、脚手架中组件传值
    day 86 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui
  • 原文地址:https://www.cnblogs.com/jf-67/p/8244794.html
Copyright © 2011-2022 走看看