React Native组件学习 Image和ImageBack

2018-04-21 本文已影响37人天方夜歌

在开发中还有一个非常重要的组件Image，通过这个组件可以展示各种各样的图片，而且在React Native中该组件可以通过多种方式加载图片资源。

一、Image组件的基本用法

1.1 从当前项目中加载图片

可以指定大小，也可以不指定大小

 <View style={styles.container}>

<Text> 加载当前项目中的图片 </Text>         

 <Image source={require('./image/icon.png')}

      style={{width: 120, height: 120}}  />

 </View>

该图片资源文件的查找和HTML，JS相似，会根据填写的图片路径相对于当前的js文件路径进行搜索。
此外，React Naive的Packager会根据平台选择相应的文件，例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios)，会分别根据android或者ios平台选择相应的文件。

1.2 加载使用APP中的图片

加载App中的图片资源需要指定大小

<View style={styles.container}>

<Text> 加载App中的图片 </Text>

//如果没有放在xcode asset中
//<Image source = {{uri:'qianbao.png'}}
//放在xcode asset中可以适配，因此我们最好把图片放在xcode asset中
<Image source = {{uri:'qianbao'}}
style = {{width: 120, height: 120}}/>

 </View>

使用已经打包在APP中的图片资源(例如:xcode asset文件夹以及Android drawable文件夹，或者随便放置的路径下)，会自动根据机子的型号去加载对应的图片资源。

1.3 加载来自网络的图片

客户端的很多图片资源基本上都是实时通过网络进行获取的，写法和上面的加载本地资源图片的方式不太一样，这边一定需要指定图片的尺寸大小

<View style={styles.container}>

<Text> 加载图片网络资源 </Text>

 <Image source = {{uri:'[https://www.baidu.com/img/bd_logo1.png'](https://www.baidu.com/img/bd_logo1.png');}}

    style = {{width: 120, height: 120} }/>

</View>

1.4 设置图片为背景

注意在rn版本0.46版本的时候添加了ImageBackground控件，在0.46版本以后使用Image的时候不能在嵌套使用，使用会报错，ImageBackground就是解决这个问题的。ImageBackground的使用和Image一样，只不过可以嵌套其他组件了。

 return (

<ImageBackground

    source={require('./image/icon.png')}

    style={{flex:1,width:200, height:100,

        resizeMode: Image.resizeMode.stretch}}>

    <Text style={{marginTop: 60, backgroundColor: 'red'}}>

        下面是背景图片

    </Text>

</ImageBackground>

);

二、Image组件的常见属性

2.1 属性方法

onLayout(function)

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

onLoad (function)

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

onLoadEnd (function)

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

onLoadStart (fcuntion)

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

resizeMode：这个属性的作用相当于OC中设置图片的内容模式
Image.resizeMode.cover：图片居中显示，没有被拉伸，超出部分被截断；
Image.resizeMode.contain：容器完全容纳图片，图片等比例进拉伸；
Image.resizeMode.stretch：图片被拉伸适应容器大小，有可能会发生变形。

source{uri:string}

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

imgStyle: {

        // 设置背景颜色

        backgroundColor:'green',

        // 设置宽度

        width:Dimensions.get('window').width,

        // 设置高度

        height:150,

        // 设置图片填充模式

        resizeMode:'cover'

    }

2.2 样式风格属性

FlexBox 支持弹性盒子风格

Transforms 支持属性动画

backgroundColor 背景颜色

borderColor 边框颜色

borderWidth 边框宽度

borderRadius 边框圆角

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

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