RN基础组件3 —— Image 和ImageBackground

news/2024/7/8 0:32:55

import {Image} from 'react-native'

说明：

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

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

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

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

情形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>

说明：

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