React Native基础之Image

Image组件

       在React Native中，Image组件是用来加载图片的组件，如果学习过android的话，应该知道Image组件的作用就相当于android中的ImageView控件，用于显示图片。

Image加载图片等几种方式

       作为RN中加载图片的组件，不同于android中的ImageView，android中的ImageView仅用来加载android项目中的drawable和mipmap目录下的图片资源。

       RN项目本就是缩小了android与ios的差别，囊括了原生的android项目和ios项目，自然也就包含了原生项目中的图片资源目录，再加上RN项目中需要公共资源目录，因此，在React Native中，Image加载图片的方式出现了好几种，如下：

• 加载RN项目中静态图片
• 加载原生图片(android:drawable/mipmap ios:Images.xcassets目录下)
• 加载网络图片

加载RN项目中的静态图片

<Image source={require('../img/icon_logo.png')} style={{marginTop:20}}/>

     
 加载方式为：

require('图片存放路径')

       此种方式用于加载RN项目中的静态图片（require中放的是RN项目中的图片路径）

       使用此方式加载静态图片时，图片的位置(在RN项目中，不能在android、ios、node-modules目录下)使用这一种加载图片的方式

     
 注意：

• require函数中填写图片路径时，需要加上图片的后缀名，如上：'.png'
• require函数中暂时不支持字符串拼接，如：require('../img/'+'icon_log.png''),如此会报异常
• require路径的前面常有：'../'、'./'这样的，'./'表示当前目录，'../'表示当前目录的上级（父）目录
• RN还有一个优势，RN中可以通过图片的命名方式来实现对应平台图片的加载，命名方式为：'图片名'+'.平台名'+'.后缀名',如：图片icon_logo.android.png和icon_logo.ios.png,RN会根据中间的平台名来加载对应平台的图片
• RN实现图片适配的方式：
  • 图片命名为icon_logo@2x.png、icon_logo@3x.png的形式，RN会根据屏幕分辨率来加载对应尺寸的图片，如果没有恰好满足屏幕分辨率的，则选择最接近的
  • 该种适配方式，对与android来说，引入的时候不能将'@2x'这样的字样引入进来，如require('./img/icon_logo@2x.png')，会导致图片无法识别，正确的加载方式为require('./img/icon_logo.png')

加载原生图片

<Image source={{uri:'icon_app'}} style = {styles.icon}></Image>

const styles = StyleSheet.create({
    container:{
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
    },
    icon:{
        width:120,
        height:120,
    },
    text:{
        color:'black',
        fontSize:16,
        marginTop:20
    }
})

     
 所谓原生图片，android中指的是app/src/main/res/drawable目录下，ios中指的是Images.xcassets目录，或者说是打包后的apk后反编译出来的图片资源

     
 从以上代码可以看到，我们可以看到，加载方式为：

{uri:'图片名称'}

这里的图片名称不带图片的后缀名，并且没有路径，只有一个图片名称

注意：

• 根据上面的代码，可以看到，需要指定图片的大小(width和height),不然图片无法显示，因为此加载方式不提供图片安全检查
• 不同于上面的加载方式，使用uri的加载方式可以实现字符串拼接，解决了上面require中不能拼接的问题，因此，如果需要使用拼接来实现加载，那么只需要将图片放入原生项目对应的目录下

还有一点需要注意，就是上面的加载方式在android中默认加载的drawable目录下的图片资源，如果想加载mipmap下的图片资源，加载方式如下：

var nativeImageSource = require('nativeImageSource');
 
class RN_Image extends Component {
  render() {
    let ades = {
      android: 'mipmap/ic_launcher',
      width: 72,
      height: 72
    };
 
    return (
      <View style={styles.container}>
          <Image style={styles.image} source={nativeImageSource(ades)} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
      flex: 1,
      alignItems: 'center',
      backgroundColor: 'gray'
  },
  image: {
      backgroundColor: 'white',
      width: 120,
      height: 120,
  },
});

module.exports = RN_Image

nativeImageSource中可以指定图片的宽高，如果在image的style中同时指定了图片宽高的话，以style中的为准。

加载网络图片

<Image
    source = {{uri:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png'}}
    style={styles.icon}
    resizeMode = 'cover'></Image>

     
 加载网络图片也是通过uri的方式来加载的

{uri:'图片url'}

同上，此种方式也是需要指定图片的大小(widht和height)的

Image常用属性

source：标记图片的引用，填写图片路径或者url
+ 大方

reseizeMode：设置图片的填充模式，有三个可选值（默认值时cover）

• cover：等比例缩放图片，超出部分不显示，使图片最短边占满组件
• contain：等比例缩放图片，图片显示完全，即缩放到最长边占满组件
• stretch：图片拉伸适应组件大小，图片有可能会发生变形

我们来看看三种模式的显示效果：

image

Image样式属性

• borderColor:设置边框颜色
• borderWidth:设置边框宽度
• borderRadius:设置边框圆角
• opacity:设置透明度（0～1之间，0表示透明，1表示不透明）
• tintColor：着色，为所有非透明的像素指定一个颜色
• backgroundColor：背景色（图片有透明背景时，可能会用到）