RN图片实践参考

43次阅读

共计 2443 个字符,预计需要花费 7 分钟才能阅读完成。

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 并不冲突,看项目需要,也可并存。

图片实践参考

调整图片尺寸

widthheight 属性可设置图片大小,
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 的设定占位。

正文完
 0