React Native 专题系列教程第3部分专项——图像

一、几个重要的概念

1、CSS像素(CSS Pixels)

浏览器使用的抽象单位

2、设备像素(device pixels)

设备显示屏幕的物理像素

3、像素密度PPI(Pixel Per Inch)

一英寸长度内的像素数量,决定设备屏幕的显示质量,表示显示设备的像素点密度。

4、点密度DPI(dots per inch)

一英寸长度内的点数量,表示印刷品的点密度。

5、设备像素比例DPR(Device Pixel Ratio)

一个点内有多少个像素

devicePixelRatio=设备物理像素/设备独立像素

React-Native-images1

6、分辨率(Resolution)

设备屏幕区域的宽高所占的像素数

7、关于retina屏

以iPhone为例,retina下devicePixelRatio=1,非retina下devicePixelRatio=2,这是因为无论是retina还是非retina屏,竖屏下,设备独立像素都是320,而它们的设备物理像素分别为640、320。

 

关于移动端图片的重要概念,可以参考下面几篇文章:

http://www.scheel-service.de/artikel/retina-displays-css-pixel-ist-nicht-mehr-gleich-device-pixel.php

http://sebastien-gabriel.com/designers-guide-to-dpi/

http://www.html5rocks.com/en/mobile/high-dpi/

 

二、常见移动设备的尺寸

参考网站:http://dpi.lv/

React-Native-images2

 

三、React Native 中的图像大小适配

图像显示是APP开发中非常重要的一部分。在React Native中使用本地静态图像使用以下代码:

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

关于React Native中使用图像的详细信息,请查看Image组件部分的内容。

上面的代码使用图像组件,并设置了显示图像的地址。默认情况下,React Native会在找当前目录下img目录下beautiful.png图片,并显示出来。

而在实际项目中,为了适配不同平台(如IOS/Android)和不同平台下的不同尺寸(如IOS平台下iphone4/iphone5/iphone6等),需要为不同的平台和不同尺寸设置显示不同的图像以达到最好的显示效果。

 

React Native提供了一适配IOS平台与Android平台以及不同平台中不同尺寸设备下,图像大小适配的方法。

1、适配不同平台

为不同的平台(IOS/Android)指定显示不同的图像,只要在上面代码中设置的图像同级目录下放入不同平台的图像,图像命名规则为:“图像名称” + “.android” + “.png”(或其它格式),图像组件的代码部分不需要更改。

如我们使用图像组件插入一个图片,图片路径为“.img/beautiful.png”,代码如下:

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

在img目录下放入beautiful.android.png图片和beautiful.ios.png图片,即可在不同平台下显示各自图片。

 

2、适配不同大小

适合不同大小,可以使用@2x,@3x,@4x等后缀,来适配不同像素密度的设备。如上面例子,在img目录下放入beautiful@2x.png图片和beautiful@3x.png,即可适配相应屏幕的图像显示。如果在img目录下找不到该设备像素比例的图片,则会显示最接近设备像素比例的图片。

React-Native-images3

 

3、适配不同平台和大小

以上两个综合,适配不同平台和大小的图片命名格式为:

beautiful@2x.android.png

beautiful@3x.android.png

示例代码:

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

class rn extends Component {
  render() {
    return (
      <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
        <Image source={require('./img/beautiful.png')} />
      </View>
    );
  }
}

AppRegistry.registerComponent('rn', () => rn);

React-Native-images4 React-Native-images5 React-Native-images6

 

四、动态控制图像显示

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

class rn extends Component {
  constructor(props){
    super(props);
    this.state = {
      active:false
    }
  }
  render() {
    var src = this.state.active ? require('./img/beautiful.png') : require('./img/great.png');
    console.log(src);
    return (
      <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
        <Image source={src} />
      </View>
    );
  }
}

AppRegistry.registerComponent('rn', () => rn);

 

那时那我

jinyunblogadmin

3 thoughts to “React Native 专题系列教程第3部分专项——图像”

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据