笔记三之Image

Image组件的基本用法

从当前项目(即本地)中加载图片

<View style={styles3.container}>
    <Text>加载本地图片</Text>
    <Image source={require('./img/1.jpg')} style={styles3.img1} />
</View>

图片地址一定要给对。

从APP中的图片加载(即android或ios目录里面的图片)

<View style={styles3.container}>
    <Image source={{uri:'ic_launcher'}} style={styles3.img1} />
</View>

这个加载图片要注意，此时只使用文件名，不带路径也不带后缀。

从网络中加载图片

<View style={styles3.container}>
    <Text>加载网络图片</Text>
            <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={styles3.baidu} />
</View>

从网络中加载图片带参数的

<Image source={{
  uri: 'https://facebook.github.io/react/img/logo_og.png',
  method: 'POST',
  headers: {
    Pragma: 'no-cache'
  },
  body: 'Your Body goes here'
}}
style={{width: 400, height: 400}} />

这个我们就可以指定我们的图片

背景图片

  <ImageBackground source={...}>
    <Text>Inside</Text>
  </ImageBackground>

这个背景图片呢，可以是我们的网络背景图片，可以是我们的本地的背景图片。

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地址或者一个本地的路径

样式风格属性

• FlexBox 支持弹性盒子风格

• Transforms 支持属性动画

• backgroundColor 背景颜色

• borderColor 边框颜色

• borderRadius 边框圆角

• overflow 设置图片尺寸超过容器可以设置显示或者隐藏(‘visible’,’hidden’)

• tintColor 颜色设置

• opacity 设置不透明度0.0(透明)-1.0(完全不透明)