React Native 之 图片使用(六)

静态图片资源

React Native项目中,图片文件的查找会和 JS 模块的查找方式一样。它提供了一个统一的方式来管理 iOS 和 Android 应用中的图片。要往 App 中添加一个静态图片,只需把图片文件放在代码文件夹中某处,然后像下面这样去引用它:

//资源属性是一个对象(object),而且并不接受字符串,正确的值是一个带有uri属性的对象。
//这样可以使我们在对象中添加一些元数据(metadata)。
<Image source={require('./my-icon.png')} />

如果你有my-icon.ios.png和my-icon.android.png,Packager 就会根据平台而选择不同的文件。

可以使用@2x,@3x这样的文件名后缀,来为不同的屏幕精度提供图片。比如下面这样的代码结构:

├── button.js
└── img├── check.png├── check@2x.png└── check@3x.png

并且button.js里有这样的代码:

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

Packager 会打包所有的图片并且依据屏幕精度提供对应的资源。譬如说,iPhone 7 会使用check@2x.png,而 iPhone 7 plus 或是 Nexus 5 上则会使用check@3x.png。如果没有图片恰好满足屏幕分辨率,则会自动选中最接近的一个图片。

这样使用的好处:

  • iOS 和 Android 一致的文件系统。
  • 图片和 JS 代码处在相同的文件夹,这样组件就可以包含自己所用的图片而不用单独去设置。
  • 不需要全局命名。你不用再担心图片名字的冲突问题了。
  • 只有实际被用到(即被 require)的图片才会被打包到你的 app。
  • 现在在开发期间,增加和修改图片不需要重新编译了,只要和修改 js 代码一样刷新你的模拟器就可以了。
  • 与访问网络图片相比,Packager 可以得知图片大小了,不需要在代码里再声明一遍尺寸。
  • 现在通过 npm 来分发组件或库可以包含图片了。

为了使新的图片资源机制正常工作,require 中的图片名字必须是一个静态字符串(不能使用变量!因为 require 是在编译时期执行,而非运行时期执行!

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

静态的非图片资源

上面描述的require语法也可以用来静态地加载你项目中的声音、视频或者文档文件。大多数常见文件类型都支持,包括.mp3, .wav, .mp4, .mov, .htm 和 .pdf等。

也可以在metro(即 packager)配置文件中添加assetExts配置项来支持其他类型的文件。

需要注意的是视频必须指定尺寸而不能使用flex样式,因为我们目前还不能从非图片资源中获取到尺寸信息。对于直接链接到 Xcode 或者 Android 资源文件夹的视频,则不会有这个限制。

网络图片

<Imagesource={{uri: 'https://facebook.github.io/react/logo-og.png',method: 'POST',headers: {Pragma: 'no-cache'},body: 'Your Body goes here'}}style={{ width: 400, height: 400 }}
/>

Uri 数据图片

如果前端拿到的是图片的 base64 数据,此时可以使用’data:'格式来显示图片。请注意,需要手动指定图片的尺寸。

建议仅对非常小的图片使用 base64 数据,比如一些小图标。

// 请记得指定宽高!
<Imagestyle={{width: 51,height: 51,resizeMode: 'contain'}}source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>

最合适的相册图片

iOS 会为同一张图片在相册中保存多个不同尺寸的副本。为了性能考虑,从这些副本中挑出最合适的尺寸显得尤为重要。对于一处 200x200 大小的缩略图,显然不应该选择最高质量的 3264x2448 大小的图片。如果恰好有匹配的尺寸,那么 React Native 会自动为你选好。如果没有,则会选择最接近的尺寸进行缩放,但也至少缩放到比所需尺寸大出 50%,以使图片看起来仍然足够清晰。这一切过程都是自动完成的,所以你不用操心自己去完成这些繁琐且易错的代码。

在浏览器中,如果你不给图片指定尺寸,那么浏览器会首先渲染一个 0x0
大小的元素占位,然后下载图片,在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是 UI会在图片加载的过程中上下跳动,使得用户体验非常糟糕。

在React Native中,有意避免了这一行为。如此一来开发者就需要做更多工作来提前知晓远程图片的尺寸(或宽高比),但我们相信这样可以带来更好的用户体验。然而,读取本地静态图片(使用require(‘./my-icon.png’)语法)则无需指定尺寸,因为它们的尺寸在加载时就可以立刻知道。

比如这样一个引用require(‘./my-icon.png’)的实际输出结果可能是:

//必须指定宽高样式。
{"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573}

背景图片与嵌套写法

return (<ImageBackground source={...} style={{width: '100%', height: '100%'}}><Text>Inside</Text></ImageBackground>
);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/14134.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何设计足够可靠的分布式缓存体系,以满足大中型移动互联网系统的需要?no.31

传统 CAP 的突破 随着分布式系统的不断演进&#xff0c;会不断遇到各种问题&#xff0c;特别是当前&#xff0c;在大中型互联网系统的演进中&#xff0c;私有云、公有云并行发展且相互融合&#xff0c;互联网系统的部署早已突破单个区域&#xff0c;系统拓扑走向全国乃至全球的…

新书推荐:6.2 else if语句

本节必须掌握的知识点&#xff1a; 示例代码二十 代码分析 汇编解析 ■if语句表达形式3 if(表达式1) statement1 else if(表达式2) statement2 else if(表达式3) statement3 …… else statementN 解析&#xff1a; 如果表达式1非0&#xff0c;则执行statement1&#…

记录github小程序短视频系统的搭建过程

GitHub - lkmc2/AwesomeVideoWxApp: 《倾心短视频》微信小程序 这个项目按readme中的来可以部署成功&#xff0c;但是会发现图片、视频全是空的&#xff0c;如下图&#xff1a; 修改源代码&#xff0c;更换图片上传与保存地址 大概涉及到这些代码块&#xff0c;进行更改即可。…

什么样的数据摆渡设备,可以满足不同网间数据的安全传输需求?

数据摆渡设备是用来在不同的网络环境间安全地传输数据的硬件或软件解决方案。它们通常用于确保在具有不同安全级别的网络&#xff08;如内网和外网&#xff09;之间进行数据交换时的安全性和合规性。以下是一些常见的数据摆渡设备和方法&#xff1a; 移动介质拷贝&#xff1a;使…

生产制造边角料核算说明及ODOO演示

今天群里有伙伴提到边角料的处理问题&#xff0c;我们梳理了一下&#xff0c;在生产过程中&#xff0c;如果产生了边角料&#xff0c;核算产成品的投料成本时需要考虑边角料的价值&#xff0c;以确保成本核算的准确性。以下是注意的几点&#xff1a; 一、边角料的入账价值 在生…

OSPF路由聚合

原理概述 与RIP不同&#xff0c;OSPF不支持自动路由聚合&#xff0c;仅支持手动路由聚合。OSPF的路由聚合有两种机制&#xff1a;区域间路由聚合和外部路由聚合。区域间路由聚合必须配置在ABR路由器上&#xff0c;指的是ABR在把与自己直接相连区域&#xff08;Area&#xff09…

K8s 二进制部署---下篇(多master节点 负载均衡 高可用)

一 master02 节点部署 master01192.168.11.5kube-apiserver&#xff0c;kube-controller-manager&#xff0c;kube-scheduler&#xff0c;etcdmaster02192.168.11.12kube-apiserver&#xff0c;kube-controller-manager&#xff0c;kube-scheduler&#xff0c;etcdnode01192.1…

RHEL7及之后系统 系统服务脚本(Rocky 9.4)

目录 源码安装 准备工作 步骤1: 下载软件 步骤2: 安装apr 步骤3: 安装apr-util 步骤4: 安装Apache HTTP Server 总结步骤 后续步骤 源码安装 准备环境&#xff1a;首先&#xff0c;确保你的系统中安装了必要的编译工具和依赖库。对于C/C程序&#xff0c;这通常包括编译器&#…

网络流量监控与流量回溯分析:全面指南

目录 什么是网络流量监控&#xff1f; 网络流量监控的主要功能 什么是流量回溯分析&#xff1f; 流量回溯分析的优势 网络流量监控与流量回溯分析的结合 如何实现有效的网络流量监控与回溯分析&#xff1f; 网络流量监控与流量回溯分析的应用场景 企业网络 数据中心 …

PEI转染试剂残留检测

转染试剂是瞬时转染生产病毒载体的主要原材料之一。聚乙烯亚胺&#xff08;Polyethylenimine, PEI&#xff09;以其适用性广泛、成本低廉、操作简便、细胞毒性低、可以在多种哺乳动物细胞中达到较高的转染效率&#xff0c;适用于无血清悬浮转染环境&#xff0c;包装容量不受限制…

【Python快速上手(二十七)】- Python3 SMTP发送邮件

目录 Python快速上手&#xff08;二十七&#xff09;- Python3 SMTP发送邮件Python3 SMTP发送邮件1. SMTP 基本概念2. 使用 smtplib 发送简单邮件2.1 设置 SMTP 服务器2.2 登录到 SMTP 服务器2.3 发送邮件2.4 关闭连接 3. 构建复杂邮件3.1 构建带有 HTML 内容的邮件3.2 发送带有…

Zookeeper 面试题(六)

1. 简述Zookeeper中的脑裂问题 &#xff1f; 在分布式系统中&#xff0c;脑裂&#xff08;Split-brain&#xff09;问题是指由于网络分区或其他故障导致系统分裂成两个或多个独立的、相互之间无法通信的部分&#xff0c;每个部分都认为自己是整个系统的唯一活跃部分。在ZooKee…

一阶数字高通滤波器

本文的主要内容包含一阶高通滤波器公式的推导和数字算法的实现以及编程和仿真 1 计算公式推导 1.1.2 算法实现及仿真 利用python实现的代码如下&#xff1a; import numpy as np # from scipy.signal import butter, lfilter, freqz import matplotlib.pyplot as plt #2pifW…

从原理上解决 uniapp (含第三方插件)打包 iOS APP 失败的问题

最近一段时间&#xff0c;我的团队基于uniapp开发的平台型APP因平台资金合规的要求&#xff0c;需要对接中金支付&#xff0c;uniapp的插件市场有一个别人做好的中金支付插件&#xff0c;但前端开发同事在引用这个 插件时&#xff0c;出现了 iOS APP 打包不成功的情况&#xff…

Pantera 合伙人简谈 Morpho:更高效、适应性更强的 DeFi 解决方案

原文标题&#xff1a;《Pioneering Peer-to-Peer Lending in the DeFi Revolution》撰文&#xff1a;Pantera Capital 合伙人 Paul Veradittakit编译&#xff1a;Chris&#xff0c;Techub News 文章来源&#xff1a;香港Web3媒体Techub News Morpho 正在超越 Compound 等传统…

Redis主从、哨兵、cluster集群的部署和细节

目录 1. 主从模式 为什么需要主从&#xff1f; 搭建主从架构 2. Sentinel(哨兵)模式 为什么需要哨兵模式&#xff1f; 搭建哨兵集群 哨兵集群 Go语言编程redis哨兵模式 有了哨兵&#xff0c;客户端连接谁&#xff1f; test1&#xff1a;redis节点主从切换 test2&am…

webgl入门-矩阵变换

矩阵变换 前言 变换有三种状态&#xff1a;平移、旋转、缩放。 当我们变换一个图形时&#xff0c;实际上就是在移动这个图形的所有顶点。 课堂目标 掌握图形变换的三种方式。可以对图像进行复合变换。 知识点 平移旋转缩放 第一章 平移 对图形的平移就是对图形所有顶点…

如何快速从手动测试转向自动化测试

寻求具有无缝持续集成和持续交付 (CI/CD) 的高效 DevOps 管道比以往任何时候都更加重要。想象一下这样一个场景&#xff1a;您的软件组织显著减少了人工工作量、降低了成本&#xff0c;并更加自信地发布了软件更新。换句话说&#xff0c;通过将 Web UI 和 API 测试结合在一起&a…

【小白课程】如何在openKylin上个性化定制开关机动画

开关机动画是Linux系统的重要组成部分&#xff0c;其主要功能是在Linux内核启动的早期遮盖内核打印日志&#xff0c;并在内核刷新屏幕分辨率时保证屏幕显示的流畅性。 其中&#xff0c;openKylin操作系统使用plymouth组件作为开关机动画显示程序。Linux系统在启动时&#xff0…

计算机SCI期刊,中科院2区,收稿范围非常广泛!

一、期刊名称 Journal of Web Semantics 二、期刊简介概况 期刊类型&#xff1a;SCI 学科领域&#xff1a;计算机科学 影响因子&#xff1a;2.5 中科院分区&#xff1a;2区 出版方式&#xff1a;开放出版 版面费&#xff1a;$1600 三、期刊征稿范围 《网络语义学杂志》…