React Native控件之Image组件讲解与美团效果实例
(一)前言
今天我们来讲解一下Image组件,这个组件是非常常用的组件,在每个应用通常都会用到这个组件,所以详细讲解一下。讲解的内容主要有以下几点:
1. Image的基本用法
2. Image属性&方法
3. Image实例-仿照美团首页顶部分类
(二)Image基本用法
- 加载项目资源图片
- 加载打包过后APK中图片
- 加载网络图片
2.1加载项目资源图片
从0.14版本开始React Native支持加载项目目录中的图片资源,现在在测试项目中创建一个images目录,在里面加入apple_logo.png图片,那么可以通过以下代码进行加载:
<View style={
{
marginTop:20, marginLeft:10, marginRight:10,backgroundColor:'gray'}}>
<Text style={
{
fontSize:20}}>测试加载项目图片!</Text>
<Image source={require('./images/apple_logo.png')} style={
{
width:200, height:200}}/>
</View>
运行效果如下:
这个图片资源文件的查找和JS模块查找相似,使用require(‘……..’),这个方法根据填写的图片路劲相对当前JS文件路劲进行搜索。
RN非常人性化的是Packager会根据平台选择相应的文件,例如apple_logo.ios.png和apple_logo.android.png两个文件,会根据Android和iOS平台选择相应的文件。
对于iOS开发者来说,肯定会知道经常可以设置@2x,@3x等格式的图片来适配手机屏幕,例如apple_logo@2x.png和apple_logo@3x.png,这样Packager进行打包的时候会根据屏幕密度进行选择显示对应的图片。如果没有恰好的满足当前屏幕分辨率的,Packager会选择最接近的图片资源。
【注意】在使用Image组件时,require方法中图片路径必须是静态字符信息,不能在require()中进行拼接。例如:
<Image source={
require('./images/'+'apple_logo.png')}>
这样运行之后就会报错了。
2.2加载混合App的资源
目前,原生APP需求还是比较多的,不过现在使用了React Native之后,我们可以进行混合App开发(一些UI是React Native代码,一些UI是原生代码),现在仍然可以利用已经打包到App里面的图片。如果现在我们有这种需求:软件已经打包生成安装包,在iOS项目中Images.xcassets和Android项目中的drawable文件夹中已经被打包了相应的资源。而且,项目中已经集成了React Native框架,现在我们需要的功能需求是“使用热更新方式更新JS代码,这段代码的功能是使用Image组件加载上诉文件夹中的已经打包到安装包中的图片资源。”
直接上代码: