RN基础组件3 —— Image 和ImageBackground

import {Image} from 'react-native' <Image  source={}/>

说明： 

  ①RN中加载图片有两种情形：

情形1：加载一张本地(手机App中)图片 —— 必须使用“导入”把图片从PC机打包入手机中

const  p1 = require('./img/1.jpg') //把图片打包入手机

import  p2  from  './img/2.jpg') //把图片打包入手机

<Image source={p1}/>

<Image source={p2}/>

情形2：加载后端数据服务器上的图片 —— 图片都是异步请求的，必须先指定明确的宽高尺寸（否则就可能发生页面重绘，影响浏览体验）

<Image  source={{uri: 'http://www.codeboy.com/3.jpg'}}/>   错误写法

<Image  style={{width:100, height:50}}  source={{uri: 'http://www.codeboy.com/3.jpg'}}/> 正确写法，必须指定width和height —— 可以是常量，也可以是状态变量

小技巧：如何获取远程图片尺寸？ Image.getSize( 'http://www.codeboy.com/1.jpg',  (w, h)=>{    //w就是图片的原始宽度，h就是图片的原始高度 } )

小知识：前端行业中可用的“模块导入/导出”语法：   第一种：CommonJS规范 —— 实现者：Node.js：   module.exports={}    require()   第二种：AMD规范   第三种：CMD规范   第四种：ES6模块规范 —— 实现着：所有的浏览器：   export(default)   import

Webpack打包时支持上述四种模块规范

小知识： URL：Uniform Resource Locator，统一的资源定位符，例如：http://www.code.com/img/1.jpg URN: Uniform Resource Naming，统一的资源命名符，例如：tel:13501234567 或 mailto: lwh@tedu.cn URI:  Uniform Resoure Identifier，统一的资源识别符， URI = URL + URN         人 = 好人 + 坏人

中国 北京 海淀区 文博大厦 F2 #101 1.jpg

1.jpg #101 F2 文博大厦  海淀区  北京 中国

import  {ImageBackground}  from   'react-native' <ImageBackground>    <Any 此处放置需要有背景图的子元素/> </ImageBackground>

说明：

  ① RN提供的样式中，没有backgroundImage相关的属性；如果某个元素想要背景图片，可以使用ImageBackground组件