React-native 中Image控件@React Native 关于图片的加载、适配、拉伸。

一. 简介

一个用以展示多种不同类型图片的React组件,包括网络图片、静态资源、临时之本土图片、以及地面磁盘上的图(如相册)等。
于0.14版本开始,React
Native提供了一个合并之计来治本iOS和Android应用中之图样。要奔App中补充加一个静态图片,只待将图纸文件在代码文件夹比如img中有处,然后如下这样夺引用它:
<Image source={require('./img/check.png')} />
要你出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('./my-icon.png')} />
错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

React Native可以通过Image组件显示图片。既可以加载网络图片,也得以加载本地资源图形。接下来,我们介绍React Native加载图片的几乎种植办法:
以混合App的图资源

假若你在编写一个混合App(一部分UI使用React
Native,而别一样片段采用平台原生代码),也得采用已经打包到App中的图形资源(通过Xcode的asset类目或者Android的drawable文件夹打包):
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
顾:这同一做法并没其余安全检查。你要好管图片于采取被真的有,而且还亟需指定尺寸。

1. 网图片加载

加载网络图片非常简单, 直接上代码:

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Image //导入对应的API组件
} from 'react-native';

var imageUrl = 'http://ojm0517sf.bkt.clouddn.com/2.jpg';
export default class TestHello extends Component {
    render() {
        return (
           <View style={styles.container}>
                <Image style={{width:80,height:80}}
                       source={{uri:imageUrl}}/>
            </View>
        );
    }
}

经可看来,需要指定source标签,uri是呼应的网图片的地方。

加载网络图片

与静态资源不同之是,你用手动指定图片的尺码。
//正确
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
style={{width: 400, height: 400}} />

//错误
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />

2. 加载手机文件系统的图片资源:

动用uri的法门,指定目录

// Android的方式
<Image style={{width:80,height:80}}
       source={{uri:'file:///sdcard//Download/gdb.png'}}/>
// IOS由于存在沙盒机制,需要先获取沙盒目录,请自行尝试
何以不在具备情况下都指定尺寸也

在浏览器被,如果您无叫图片指定尺寸,那么浏览器会首先渲染一个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}

3.加载原生图片:

原生图片资源: ios项目要android项目下的图样资源。
方式:将长到相应的图纸资源管理文件中.eg:ios 放到images.xacssets下
android放到drawable下
Android项目遭到,ReactNative只能加载显示drawable下的图片,而mipmap图片是无力回天加载的.

<Image 
        style={{width:80,height:80}}
        source={{uri:'icon'}}/>
由此嵌套实现背景图片

好像web中的背景图(background-image),只待简地创造一个<Image>组件,然后把需要背景图的子组件嵌入其中即可
return (
<Image source={...}>
<Text>Inside</Text>
</Image>
);

4.加载本地图片:

采用当地图片资源时,可以无点名图片尺寸.默认情况下,会盖图片的尺码,进行显示.

<Image 
        source={require('./shell.png')}/>

require可以领略成:
使用了一个宣称,进行预加载,等同于当代码中先行加载了图资源.
而是以下红色方框中的章程会错:

澳门新葡亰 1

image.png

澳门新葡亰 2

image.png

以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);
}

于RN开发被, 不允许使用字符串变量来指定要事先加载的图纸的名称.

为React
Native在编译代码时处理所有的require声明,而未是当运行时动态的处理,而var在运转时赋值,所以不克动态加载图片资源.
就会见报点的错误.

二. 属性

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(相对路径)来引用)的途径

留意: 路径处理

require
中的图形名字务必是一个静态字符串。如果欲工作逻辑动态获取,应以标准判断的话语放到require
外。

// 正确写法: 
<Image source={require('./my-icon.png')} />
// 错误写法:
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />
// 正确
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

当型逐渐庞大,为了资源管理有利于,我们怀念使发出单独的目录来保管图片,那么,我们得了解图片管理与目录索引。

三. 样式风格

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(完全无透明)

图管理及目录索引

当型以图片放置指定的目(非默认目录),进行索引的办法
eg: 创造一个目结构如下:

澳门新葡亰 3

image.png

app:与android和ios同目录
resource:存放项目受到之所以到之各种资源(图片,颜色,通用样式等)
imgs:存放图片的公文夹
Images.js:图片管理类
修Images.js: 声明图片的援路径

import React from 'react';
export default {
    common: {
        ic_launcher: require('./imgs/ic_launcher.png'),
        button_moeny: require('./imgs/guide_button_image.png')
    }
}
// common自定义的图片标签,require()参数为对应本地的图片路径

援方式

<Image style={styles.imageStyle}
       source={Images.common.ic_launcher}/>
      // Images图片管理类,common自定义的图片标签,ic_launcher图片名称
四. 示例

加载网路图片的例证
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:'center'}]}>
<View style={styles.image}>
<Image style={styles.img}
resizeMode='contain'
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'
}
}
);

效果

澳门新葡亰 4

Image_first.jpeg

点击下一致布置

澳门新葡亰 5

Image_second.jpeg

点击下同样布置

澳门新葡亰 6

Image_third.jpeg

style=”font-size: 18px;”>记录自己要好的RN学习的路,纯属自己增值,有啊尴尬的地方,一起谈论发展

 

 

作者介绍:半路学IT,做开发3年,先下车于同小共享单车店,做后台开发!

 

 

 

 我开始了一个公众号,欢迎各位有志同道合朋友,关注!不期分享工作,和我得故事!

 

 

 

澳门新葡亰 7

 

差不多分辨率屏幕的适配

以React
Native项目蒙,如果急需适配不同分辨率的屏幕,则需用iOS上针对图片命名的章程,不同分辨率之间用@2x、@3x来区分(如:image.png,image@2x.png,image@3x.png),在代码中使用时,选择image.png
这样系统会自行根据屏幕分辨率,去挑选该分辨率所对应之图片。请自行尝试.

Image resizeMode 图片拉伸方式

resizeMode enum(‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’)
resizeMode 决定当组件尺寸以及图片尺寸不成比例的上什么调整图的深浅。
咱俩由此对相同布置网络图片设置不同之拉伸方式,观察结果。原图效果:

澳门新葡亰 8

image.png

(原图片地址:http://ojm0517sf.bkt.clouddn.com/2.jpg)

style={{width:375,height:375}} //我们设置图片宽高

‘cover’:
在保障图片宽高比的前提下,缩放图片,直到宽度和可观都>=容器视图的尺寸(resizeMode的默认属性)。
成效:超出容器的一对非亮,就是说,图片或来得不净。
cover效果如下:

澳门新葡亰 9

image.png

‘contain’:在保图片宽高比的前提下缩放图片,直到宽度和可观都<=容器视图的尺寸。
效能:图片完全展示,被打包于容器被,容器被或留下起空白.
contain效果如下:

澳门新葡亰 10

image.png

‘stretch’: 拉伸图片都非保障宽高比,直到宽高都刚好填满容器。
功用:图片于关伸或失去真.
stretch效果如下:

澳门新葡亰 11

image.png

‘repeat’: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。
Android中使会报错.
‘center’: 居中未关伸,效果如下:

澳门新葡亰 12

image.png

用留意的是:用Image组件加载网络图片时,或者当原生目录下加载图片时,React Native都无法获得图片大小,无法就渲染.所以必须在体制中宣示图片的松和高,如果无声明,则图片将未会见吃显示在界面上。

参考文档

guthub上facebook关于Image的介绍

引进阅读

React Native
学习笔记
Reac
Native布局详细指南
React
Native调试技巧和感受
React
Native发布APP之签名打包APK
React
Native应用部署、热更新-CodePush最新集成总结

相关文章

Leave a Comment.