Image组件加载方式
从当前项目中加载
- 图片资源文件的查找和JS模块相似,会根据填写的图片路径相对于当前的js文件路径进行搜索。
- React Naive的Packager会根据平台选择相应的文件,例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios),会分别根据android或者ios平台选择相应的文件。
- Packager会打包所有的图片并且依据屏幕精度提供对应的资源。譬如说,iPhone 5s会使用check@2x.png,而Nexus 5上则会使用check@3x.png。如果没有图片恰好满足屏幕分辨率,则会自动选中最接近的一个图片。
- 注意:如果你添加图片的时候packager正在运行,可能需要重启packager以便能正确引入新添加的图片。
- 这样处理的优势:
- iOS和Android一致的文件系统。
- 图片和JS代码处在相同的文件夹,这样组件就可以包含自己所用的图片而不用单独去设置。
- 不需要全局命名。你不用再担心图片名字的冲突问题了。
- 只有实际被用到(即被require)的图片才会被打包到你的app。
- 与访问网络图片相比,Packager可以得知图片大小了,不需要在代码里再声明一遍尺寸。
- 现在通过npm来分发组件或库可以包含图片了。
- 注意:为了使新的图片资源机制正常工作,require中的图片名字必须是一个静态字符串(不能使用变量!因为require是在编译时期执行,而非运行时期执行!)。
export default class App5 extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Image source={require('./image/NO.png')} style={{width: 120, height: 120}} />
</View>
);
}
}
加载使用APP中的图片
如果你在编写一个混合App(一部分UI使用React Native,而另一部分使用平台原生代码),也可以使用已经打包到App中的图片资源(以拖拽的方式放置在Xcode的asset类目中,或是放置在Android的drawable目录里)。注意此时只使用文件名,不带路径也不带后缀
- 在iOS中
<View style={styles.container}>
<Image source={{uri: 'BG1'}} style={{width: 120, height: 120}} />
</View>
- 在Android中
<View style={styles.container}>
<Image source={{uri: 'asset:/BG1.png'}} style={{width: 40, height: 40}} />
</View>
加载来自网络的图片
- 客户端的很多图片资源基本上都是实时通过网络进行获取的,但是需要指定图片的尺寸大小
强烈建议你使用https以满足iOS App Transport Security 的要求
关于resizeMode属性
- Image.resizeMode.cover:图片居中显示,没有被拉伸,超出部分被截断
- Image.resizeMode.contain:容器完全容纳图片,图片等比例进拉伸
- Image.resizeMode.stretch: 图片被拉伸适应容器大小,有可能会发生变形
<View style={styles.container}>
<Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}}style={{width:100, height:100, resizeMode: Image.resizeMode.contain}}/>
</View>
设置背景图片
<View style={styles.container}>
<ImageBackground source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{marginTop:20,
marginLeft:20,flex:1,width:200, height:100,}}>
<Text style={{marginTop: 60, backgroundColor: 'red'}}>下面是背景图片</Text>
</ImageBackground>
</View>
效果:
Image组件的常见属性
onLayout(function)
当Image布局发生改变的,会进行调用该方法,调用的代码为:{nativeEvent: {layout: {x, y, width, height}}}.onLoad (function)
当图片加载成功之后,回调该方法- onLoadEnd (function)
当图片加载失败回调该方法,该不会管图片加载成功还是失败 - onLoadStart (fcuntion)
当图片开始加载的时候调用该方法 - resizeMode
缩放比例,可选参数(‘cover’, ‘contain’, ‘stretch’) 该当图片的尺寸超过布局的尺寸的时候,会根据设置Mode进行缩放或者裁剪图片 - source{uri:string}
进行标记图片的引用,该参数可以为一个网络url地址或者一个本地的路径
Image组件的样式风格属性
- FlexBox 支持弹性盒子风格
- Transforms 支持属性动画
- backgroundColor 背景颜色
- borderColor 边框颜色
- borderWidth 边框宽度
- borderRadius 边框圆角
- overflow 设置图片尺寸超过容器可以设置显示或者隐藏(‘visible’,’hidden’)
- tintColor 颜色设置
- opacity 设置不透明度0.0(透明)-1.0(完全不透明)