澳门葡京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最新集成总结

相关文章