React-native 中Image控件的简介

一. 简介

一个用于显示多种不同类型图片的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。
从0.14版本开始，React Native提供了一个统一的方式来管理iOS和Android应用中的图片。要往App中添加一个静态图片，只需把图片文件放在代码文件夹比如img中某处，然后像下面这样去引用它：
<Image source={require(&#39;./img/check.png&#39;)} />
如果你有my-icon.ios.png和my-icon.android.png，Packager就会根据平台而选择不同的文件。
你还可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片。比如下面这样的代码结构：
------ button.js
------ img
------   |-------- check@2x.png
------    |-------- check@3x.p
Packager会打包所有的图片并且依据屏幕精度提供对应的资源。譬如说，iPhone 5s会使用check@2x.png，而Nexus 5上则会使用check@3x.png。如果没有图片恰好满足屏幕分辨率，则会自动选中最接近的一个图片。
【注意】如果你添加图片的时候packager正在运行，可能需要重启packager以便能正确引入新添加的图片。为了使新的图片资源机制正常工作，require中的图片名字必须是一个静态字符串,不能在require中进行拼接。
//正确
<Image source={require(&#39;./my-icon.png&#39;)} />
错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require(&#39;./&#39; + icon + &#39;.png&#39;)} />

使用混合App的图片资源

如果你在编写一个混合App（一部分UI使用React Native，而另一部分使用平台原生代码），也可以使用已经打包到App中的图片资源（通过Xcode的asset类目或者Android的drawable文件夹打包）：
<Image source={{uri: &#39;app_icon&#39;}} style={{width: 40, height: 40}} />
注意：这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在，而且还需要指定尺寸。

加载网络图片

与静态资源不同的是，你需要手动指定图片的尺寸。
//正确
<Image source={{uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;}} style={{width: 400, height: 400}} />
//错误
<Image source={{uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;}} />

为什么不在所有情况下都指定尺寸呢

在浏览器中，如果你不给图片指定尺寸，那么浏览器会首先渲染一个0x0大小的元素占位，然后下载图片，在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是UI会在图片加载的过程中上下跳动，使得用户体验非常糟糕。
在React Native中有意避免了这一行为。如此一来开发者就需要做更多工作来提前知晓远程图片的尺寸（或宽高比），但我们相信这样可以带来更好的用户体验。然而，从已经打包好的应用资源文件中读取图片（使用require('image!x')语法）则无需指定尺寸，因为它们的尺寸在加载时就可以立刻知道。
比如这样一个引用require('image!logo')的实际输出结果可能是：
{"__packager_asset":true,"isStatic":true,"path":"/Users/react/HelloWorld/iOS/Images.xcassets/react.imageset/logo.png","uri":"logo","width":591,"height":573}

通过嵌套实现背景图片

类似web中的背景图（background-image），只需简单地创建一个组件，然后把需要背景图的子组件嵌入其中即可
return (  <Image source={...}>    <Text>Inside</Text>  </Image> );

在Android 上支持GIF和WebP格式的图片

dependencies {
 // 如果你需要支持Android4.0(API level 14)之前的版本
 compile 'com.facebook.fresco:animated-base-support:0.11.0'

 // 如果你需要支持GIF动图
 compile 'com.facebook.fresco:animated-gif:0.11.0'

 // 如果你需要支持WebP格式，包括WebP动图
 compile 'com.facebook.fresco:animated-webp:0.11.0'
 compile 'com.facebook.fresco:webpsupport:0.11.0'

 // 如果只需要支持WebP格式而不需要动图
 compile 'com.facebook.fresco:webpsupport:0.11.0'
}
如果你在使用GIF的同时还使用了ProGuard，那么需要在proguard-rules.pro中添加如下规则 :
-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {  public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); }

二. 属性

1.onLayout   (function) 当Image布局发生改变的，会进行调用该方法，调用的代码为:
{nativeEvent: {layout: {x, y, width, height}}}.
2.onLoad (function):当图片加载成功之后，回调该方法
3.onLoadEnd (function):当图片加载失败回调该方法，不会管图片加载成功还是失败
4.onLoadStart (fcuntion):当图片开始加载的时候调用该方法
5.resizeMode  缩放比例,可选参数('cover', 'contain', 'stretch') 当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片
cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。
contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白
stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。
repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。
center: 居中不拉伸。
6.source {uri:string} 进行标记图片的引用，该参数可以为一个网络url地址或者一个本地(使用require(相对路径)来引用)的路径

三. 样式风格

1.FlexBox  支持弹性盒子风格
2.Transforms  支持属性动画                3.resizeMode  设置缩放模式
4.backgroundColor 背景颜色
5.borderColor     边框颜色              6.borderWidth 边框宽度
7.borderRadius  边框圆角
8.overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')
9.tintColor  颜色设置         10.opacity 设置不透明度0.0(透明)-1.0(完全不透明)

四. 示例

加载网路图片的例子
class MyImageDemo extends Component {    render() {        return (            <View style={[styles.flex,{marginTop:45}]}>                <MyImage imgs={imgs}> </MyImage>            </View>        );    } }
class MyImage extends Component {    constructor(props) {        super(props);        this.state = {            count: 0,//图片索引            imgs: this.props.imgs,        };    }
render() {        return (            <View style={[styles.flex,{alignItems:&#39;center&#39;}]}>                <View style={styles.image}>                    <Image style={styles.img} resizeMode=&#39;contain&#39; source={{uri:this.state.imgs[this.state.count]}}/>                </View>                <View style={styles.btns}>                    <TouchableOpacity onPress={this.onPrevious.bind(this)}><View style={styles.btn}><Text>上一张</Text></View></TouchableOpacity>
<TouchableOpacity onPress={this.onNext.bind(this)}><View style={styles.btn}><Text>下一张</Text></View></TouchableOpacity>                </View> </View>        );    }
onPrevious() {        var count = this.state.count;        count--;        if (count >= 0) {            this.setState({                count: count,            });        }    }    onNext() {        var count = this.state.count;        count++;        if (count < this.state.imgs.length) {            this.setState({                count: count,            });        }    } }
const styles = StyleSheet.create({        flex: {            flex: 1,        },        image: {            width: 300,            height: 200,            borderWidth: 1,            justifyContent: 'center',            alignItems: 'center',            borderColor: '#ccc',            borderRadius: 5,        },        img: {            width: 200,            height: 150,        },        btn: {            width: 60,            height: 35,            borderWidth: 1,            borderColor: '#ccc',            borderRadius: 3,            justifyContent: 'center',            alignItems: 'center',            marginRight: 30,        },        btns: {            flexDirection: 'row',            marginTop: 20,            justifyContent: 'center'        }    } );

效果

Image_first.jpeg

点击下一张

Image_second.jpeg

点击下一张

Image_third.jpeg

记录我自己的RN学习之路，纯属自己增值，有什么不对的地方，一起讨论进步

以上是React-native 中Image控件的简介的详细内容。更多信息请关注PHP中文网其他相关文章！