ReactNative系列之四Image

Image加载分为本地加载与网络加载

1、 本地加载如下

<Image style={styles.subConainerStyle} source={require('./image/shoutibao.png')}/>

注意：本地文件的路径require时不可使用变量,具体原因待查,以下是错误的写法！

let imageUri = "./image/" + imageSrouce.icon + ".png";

2、网络加载

 <Image style={styles.subConainerStyle} source={{uri: "https://facebook.github.io/react/img/logo_og.png"}}/>

3、设置图片为背景

<Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{flex:1,width:200, height:100, resizeMode: Image.resizeMode.stretch}}>

           <Text style={{marginTop: 60, backgroundColor: 'red'}}> 我是文字，下面有背景图</Text>

</Image>

4、Image组件常见属性

a)属性方法

   onLayout(function)

   当Image布局发生改变的，会进行调用该方法，调用的代码为:{nativeEvent: {layout: {x, y, width, height}}}.

   onLoad (function)

   当图片加载成功之后，回调该方法

   onLoadEnd (function)

   当图片加载失败回调该方法，该不会管图片加载成功还是失败

   onLoadStart (fcuntion)

   当图片开始加载的时候调用该方法

   resizeMode

   缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片

   source{uri:string}

   进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径

b) 样式风格属性

  FlexBox  支持弹性盒子风格

  Transforms  支持属性动画

  backgroundColor 背景颜色

  borderColor     边框颜色

  borderWidth 边框宽度

  borderRadius  边框圆角

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

  tintColor  颜色设置

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