React Native控件之Image组件讲解

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组件加载上诉文件夹中的已经打包到安装包中的图片资源。”

直接上代码：