RN图片实践参考

RN图片实践参考

本文档介绍了RN中图片展现方式，从几个方面介绍

• 图标的展现方案
• 实践参考
• 附上原生展现图片方式介绍做为补充

适合新手食用。

图标

图标不建议使用位图，参考网上的实战经验，使用栅格图片可能会：

1. 渲染不及时,于是在页面出现时图标留白一下子。
2. 须要为不一样尺寸的屏幕准备对应资源，app size变大。

有两个方案，使用svg和iconfont。

svg

react-native自己不支持svg， react-native-svg是社区提供的解决方案。使用也很直观，语法上能够看成一个组件来使用。

安装见github

使用

库自己提供基本的图案，如矩形，点……

若要使用自定义svg图案，有两种方式

方案一：转换成js文件引入

1. 把svg文件转换成js文件

https://github.com/smooth-cod...

1. 引入文件，当成component使用

import SvgCookie from '../assets/imgs/svg/Cookie'
<SvgCookie width={100} height={240} />

方案二：使用transform直接引入svg文件

须要配置metro.config.js文件，见 react-native-svg-transformer
此方案更简单，能够直接使用svg文件。

import BalloonSVG from '../assets/imgs/svgSrc/hot-air-balloon.svg'
<BalloonSVG width={100} height={240} />

这是被react-native-svg推荐的方式，目前（我的）不清楚metro文件的做用机制，须要考虑可维护性。

可能遇到的问题：

• requireNativeComponent: "RNSVGDefs" was not found in the UImanager.
  参考 https://github.com/vault-deve...

iconfont

react-native-vector-icons

iconfont也是使用图标的一种经常使用方式，使用起来最简单

<Icon name={'home'} size={26} color="red"/>

然而不支持多色。

库内置iconfont可以使用，项目自定义图标须要经过命令行把css和ttf文件生成组件文件。

iconfont和svg并不冲突，看项目须要，也可并存。

图片实践参考

调整图片尺寸

width 和height 属性可设置图片大小，
resizeMode决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。

自适应方案

使用flex布局

父元素使用flex布局，图片子元素设置百分比，同时设置resizeMode 调整比例。

根据屏幕大小计算

根据图片高宽和设备高宽的比例来调整。
如但愿图片占据屏幕宽80%，

比率 = 设备宽 / 图片宽
缩放后图片宽 = 设备宽 * 0.8
缩放后图片高 = 图片高 * 比率 * 0.8

第三方

react-native-fast-image 库可更好地处理缓存，而且提供了preload，指定优先级的功能。

背景图

可以使用RN中ImageBackground 组件，把须要背景图的子组件嵌入其中便可，它有着和Image组件同样的props。
源码很简单，有特殊需求，也可本身实现。

原生使用

原生提供下面几种方式展现图片：

• 静态图片资源
• 使用混合App的图片资源
• 网络图片
• base64编码
• 系统相册获取

静态图片资源

<Image source={require('./my-icon.png')} />

自动匹配平台

图片文件的查找会和JS模块的查找方式同样。
若是你有`my-icon.ios.png`和`my-icon.android.png`，Packager就会根据平台而选择不一样的文件。

自动匹配精度

如项目文件结构和代码以下

├── index.js
└── img
    ├── my-icon@2x.png
    └── my-icon@3x.png    
     
<Image source={require('./assets/imgs/check.png')} />

Packager会打包全部的图片而且依据屏幕精度提供对应的资源。

note:

• 如未定义样式则默认按原尺寸加载。
• 只有实际被用到（即被require）的图片才会被打包到你的app。
• 在开发期间，增长和修改图片不须要从新编译了，只需像修改了js代码同样从新加载。
• 为了使新的图片资源机制正常工做，require中的图片名字必须是一个静态字符串，不能使用变量

使用混合App的图片资源

若是你在编写一个混合App（一部分UI使用React Native，而另外一部分使用平台原生代码），也可使用已经打包到App中的图片资源。
注意此时只使用文件名，不带路径也不带后缀：

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

对于放置在Android的assets目录中的图片，还可使用asset:/ 前缀来引用：

<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

网络图片

网络图片须要手动指定图片的尺寸，不然没法显示。
最好使用https，不然须要手动配置。

<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

• 能够在Image组件的source属性中指定一些请求参数

base64

有时候你可能拿到的是图片的 base64 数据，此时可使用'data:'格式来显示图片。须要手动指定图片的尺寸。

系统相册获取

可从相册获取图片资源展现。

note

• iOS提供缓存控制
• 除了读取本地静态图片，其余方式打开图片都须要指定尺寸。
• require不存在的资源时，会报错。经过uri获取图片不存在时，不报错，且会根据style的设定占位。