【RN - 基础】之Image使用简介 - ITGungnir

时间：2024-03-11 19:38:59

【RN - 基础】之Image使用简介

　　Image组件是用来加载图片的。React Native项目加载图片往往有三种方式：

  • 从React Native项目中加载图片；
  • 从APP项目中加载图片；
  • 从网络中加载图片。

 

Image组件加载图片

加载项目图片资源

　　所谓加载React Native项目中的图片资源，指的是加载React Native项目中除了android、ios、node_module文件夹之外的其他文件夹中的图片资源。

　　加载React Native项目中的资源图片，可以使用 require 方法。实例代码如： <Image source={require(\'./images/apple_logo.png\')}/> 。

　　React Native可以根据平台来选择不同的图片，例如，图片文件夹下有 logo.android.png 和 logo.ios.png ，则RN会根据当前的设备是安卓机还是苹果机来动态的加载相应设备下的图片。

　　【注意】React Native使用 require 方法加载项目图片资源的方法暂时不支持字符串拼接，即： <Image source={require(\'./images/\' + \'apple_logo.png\')}> 这种形式会报如下图所示的错误：

　　这里补充一些关于路径的问题： ./ 表示当前目录， ./../ 表示当前目录的上一级目录，依此类推。

 

加载APP图片资源

　　这里的加载APP中的图片资源，都是从打包后的APK文件中反编译出来的图片资源，对于Android项目，图片必须存在于 app/src/main/res/drawable 文件夹内；对于iOS项目，图片必须存在于 Images.xcassets 文件夹内。

　　上面说，无论Android还是iOS，都是从打包后的APK文件中取图片的，因此，我们在将图片放到Android或iOS的相应文件夹下后，需要先运行一遍项目，或者Build一下APK，这样才能保证项目的APK文件中打包了刚刚放进去的图片。

　　实例代码如： <Image source={{uri: \'apple_logo\'} style={{width:40, height:40}}/> 。

　　【注意1】这种方式获取到的图片不提供安全检查，因此我们需要自己指定图片大小，否则图片显示不出来。

　　【注意2】使用这种方式获取图片，uri中不能指定图片后缀，即只需要指定文件名即可。

　　【注意3】 uri 方式支持字符串拼接，因此可以解决 require 方法不能拼接的问题，即解决方法是将图片放入APK中。

 

加载网络图片资源

　　加载网络图片同样用到了 uri 的方法，实例代码如： <Image source={{uri:\'http://.../apple_logo.png\'}} style={{width:200, height:200}} /> 。

　　【注意】使用这种方法加载网络图片，同样必须指定图片的尺寸。

 

Image作为其他组件的背景图片

　　Image可以作为其他组件的背景图片展示，其方法是将Image嵌套在这些组件的外层，实例代码如下：

<Image source={{ uri: \'logo\' }} style={{ width: 150, height: 150 }}>
    <Text style={{ color: \'green\', fontSize: 20, backgroundColor: \'transparent\' }}>我有一个背景图片！</Text>
    <Text style={{ color: \'green\', fontSize: 20, backgroundColor: \'transparent\' }}>我有一个背景图片！</Text>
</Image>

 

Image的属性

 resizeMode ：当加载的图片的尺寸与设置的宽高不匹配时，决定怎样去加载图片，有三个可选值：cover（等比例缩放，使图片最短边占满组件）、contain（等比例缩放，使图片最长边占满组件）、stretch（拉伸铺满，可能改变图片外表比例）。

 source ：图片的资源，上面已经介绍，这里不加赘述。

 

Image的style

名称value平台
backfaceVisibility enum(‘visible’, ‘hidden’) iOS与Android
backgroundColor 颜色 iOS与Android
borderBottomLeftRadius number iOS与Android
borderBottomRightRadius number iOS与Android
borderColor 颜色 iOS与Android
borderRadius number iOS与Android
borderTopLeftRadius number iOS与Android
borderTopRightRadius number iOS与Android
borderWidth number iOS与Android
opacity enum(‘visible’, ‘hidden’) iOS与Android
overflow enum(‘visible’, ‘hidden’) iOS与Android
tintColor 颜色，改变所有非透明像素的颜色 iOS与Android
overlayColor string类型，当图片组件有圆角，指定overlayColor将导致剩下的部分被纯净颜色填充。这个是非常有用的对于Android平台不能实现软件。利用该属性一个典型方式是显示图片背景色然后同时设置overlayColor为背景颜色 Android
defaultSource 当加载图片过程中默认显示的静态图片 iOS

相关文章