React-Native中关于图片问题知识总结

系列文章目录

  1. React-Native环境搭建(IOS)
  2. React-Native项目 — 关于IOS知识储备
  3. React-Native项目工程搭建(开发模板搭建)
  4. React-Native项目矢量图标库(react-native-vector-icons)
  5. React-Native项目 — 自定义字体的使用

目录

  • 系列文章目录
  • 前言
  • 一、图片选取
  • 二、图片上传
  • 三、图片压缩、水印、鉴黄等能力
  • 四、图片拖拽和照片排序编辑
  • 总结

前言

任何一个App,几乎都绕不过去一个话题,那就是图片。

图片的技术问题,几乎涵盖整个App的大部分业务场景,这些场景包括:信息流中的帖子浏览、内容发布携带图片的场景、个人头像上传和裁剪、甚至某些照片墙排序编辑的场景等等。

如果归纳总结,RN中关于图片的技术其实无非就是这么几个:图片选取、图片裁剪、图片上传、图片的压缩、拖拽以及编辑排序等能力。

一、图片选取

在RN中,选取图片有专门的第三方库,最常用的有两个,分别是:react-native-image-picker、
react-native-image-crop-picker。

这两者的区别在于,后者能够提供额外的图片裁剪能力。

示例代码如下:

import {launchCamera, launchImageLibrary} from 'react-native-image-picker';// 选取图片
launchImageLibrary({mediaType: 'photo', selectionLimit: 18}).then(res => {if (!res.didCancel) {console.log(res.assets);// 其中,assets,就是选取的本地图片资源。可以惊醒基本的图片展示。}
})

大多数的业务场景,我们用这样的库,就够了。但是,通常情况下,我们的业务中,对于开发者的要求,不仅仅在于实现功能,它也要求我们必须具备良好的UI视觉体验。是的,这两个库,并没有给我们提供那种良好的视觉交互。

所以,图片选取能力,在正常的业务开发中,一般是由native提供图片选择的组件。(这一部分,只能借助ios/android开发人员协助)

二、图片上传

RN的图片上传并没有什么特别之处。

所谓的图片上传,也就是把本地的图片,上传到服务端进行处理的一种过程。

但是,正常的业务,也许并不像我们想象的那么简单。

1、图片资源,一般不会存储到数据库中,它一般以静态资源的方式,存储在云端的文件服务器中,而且,这种存储文件的服务器,和数据库服务完全是分开的。(一般而言,会使用阿里云/腾讯云的资源存储服务)

2、图片的上传,是否一定要经过服务端?我认为也是一个值得思考的问题。图片这种资源,上传对于服务器的压力是比较大的。很多情况下,是客户端直接对接云端的文件上传能力。

在我们正式的业务中,我们一般是,拿着某某云的客户端sdk,获取密钥,进行图片文件的上传。

这个时候,从技术的角度来思考,这些云,支持的客户端sdk,到底包不包含RN的sdk。因为RN的运行环境,和普通的web网页,小程序,是完全不同的。

如果没有相关支持的sdk,那么我们会为它的实现,要付出比较大的代价。

三、图片压缩、水印、鉴黄等能力

其实无论是图片压缩、水印、还是图片鉴黄等能力,我们用程序都是可以实现的。

比如图片的压缩,它会有基于canvas的绘图压缩,有基于图片的像素点能力压缩,有基于图片格式的压缩,但是,在正常的业务中,想要有一个完美的算法,保证自己的压缩能力,质量都是最优,这个就很难了。

图片水印、鉴黄,也是这样的逻辑,代码是可以实现,可是算法是否是最优,效果是否是最好,我们短时间内,几乎无法控制。

一般而言,我们使用哪一家的文件存储服务,就会使用这家服务商的这些能力。我们的开发就变成了,付费,进行少量的代码改造或者服务器配置,就能得到想要的结果。

四、图片拖拽和照片排序编辑

首先,RN是支持基本的拖拽能力的。

单张图片的拖拽,相对而言,在业务中,也比较好实现。PanResponder相关的Api,就是为这个目标而服务的。

但是,如果我们的需求,变成了对各种图片的拖拽排序,就是一个比较复杂的需求了,如果图片的大小,都无法一致,那这个需求就变的更难了。

这个时候的难点不在于,拖拽本身,二是在于复杂的页面视图边距,以及滑动距离的计算等等。

在我们的真实项目实践中,我们使用了 react-native-drag-sort,这个拖拽排序库,进行了业务实践。

总结

RN作为App开发的一种选项,其成熟度已经很高了。

图片作为一款App开发,必不可少的一部分内容,RN几乎都做了比较完备的支持。

当然,任何项目,对于图片的诉求几乎都是一致的,面临的问题也都是一致的。只是面对不同的技术,我们选用的工具,代码,稍微有些差别罢了。

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

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

相关文章

Transformer-LSTM预测 | Matlab实现Transformer-LSTM多变量时间序列预测

Transformer-LSTM预测 | Matlab实现Transformer-LSTM多变量时间序列预测 目录 Transformer-LSTM预测 | Matlab实现Transformer-LSTM多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现Transformer-LSTM多变量时间序列预测,Transf…

JavaWeb开发基础7个Web术语解析

7个Web术语 Website: static vs dynamic HTTP HTTP Requests GET vs POST Servlet Container Server: Web vs Application Content Type Website: static vs dynamic 网站内容包括文本、图片、音频、视频,通过URL来访问。网站分为静态网站和动态网站。 静态网…

【计算机组成原理实验】——实验 MIPS 指令系统和 MIPS 体系结构

实验 MIPS 指令系统和 MIPS 体系结构 一、实验目的 了解和熟悉指令级模拟器。 熟练掌握 MIPSsim 模拟器的操作和使用方法。 熟悉 MIPS 指令系统及其特点,加深对 MIPS 指令操作语义的理解。 熟悉 MIPS 体系结构。 二、实验平台 实验平台采用指令级和流水线操作…

通用的职位招聘小程序ui模板

蓝色简单的校园招聘,行业招聘,职位招聘手机小程序页面模板。包含:职位列表、职位详情、基本信息填写、登录、个人主页、消息页面等功能 通用的职位招聘小程序ui模板

洛谷 P3613 学习用map代替大大大数组的好题

题目链接:P3613 【深基15.例2】寄包柜 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目截图: 题意分析: 非常简单的存入和取出操作 唯一的 “难点” 在于 数组开不到 a[100007][100007],会暴内存 非常巧妙的引入 map 来解决…

Springboot 3.x - Reactive programming

一、Preliminary Knowledge Functional InterfaceLambda expressionStream API Intermediate operation filter:Used to filter elements in a streammap:One-to-one conversionflatMap:One-to-many conversiondistinct、sorted、peek、limi…

详解Java垃圾回收(GC)机制

一、为什么需要垃圾回收 如果不进行垃圾回收,内存迟早都会被消耗空,因为我们在不断的分配内存空间而不进行回收。除非内存无限大,我们可以任性的分配而不回收,但是事实并非如此。所以,垃圾回收是必须的。 二、哪些内…

【ARMv8/v9 GIC 系列 1.8 -- PE 中断处理的前期评估】

请阅读【ARM GICv3/v4 实战学习 】 文章目录 Interaction of group and individual interrupt enablesLPIs的启用Interaction of group and individual interrupt enables 在ARM GICv3和GICv4架构中,GICD_*和GICR_*寄存器组 决定了处理器元素(PE)能够识别的最高优先级 pend…

【Java】了解异常

初始异常 我们平时应该已经接触过一些 “异常” 了,这里列举一些例子。 算术异常: 数组下标越界异常: 访问空指针异常: 所谓异常指的就是程序在 运行时 出现错误时通知调用者的一种机制。 异常的基本用法 捕获异常 try{ 有可能…

使用静态图加速

背景介绍 AI编译框架分为两种运行模式,分别是动态图模式以及静态图模式。MindSpore默认情况下是以动态图模式运行,但也支持手工切换为静态图模式。两种运行模式的详细介绍如下: 动态图模式 动态图的特点是计算图的构建和计算同时发生&…

Open3D 删除点云中重叠的点(方法一)

目录 一、概述 二、代码实现 三、实现效果 3.1原始点云 3.2处理后的点云 3.3计算结果 一、概述 在点云处理中,重叠点(即重复点)可能会对数据分析和处理的结果产生负面影响。因此,删除重叠点是点云预处理中常见且重要的步骤。…

C++标准库常用的遍历和查找算法

文章目录 1.常用遍历算法1.for_each2.transform 2.常用查找算法1. find2. find_if3. adjacent_find4. binary_search5. count6. count_if 1.常用遍历算法 1.for_each C的std::for_each算法是标准库中的一个迭代器算法,它对容器或范围内的每个元素执行指定的操作。…

缺失行处理(R和python)

R(complete.cases) rm(listls()) # 创建一个包含缺失值的数据框 # df <- data.frame( # x c(1, 2, NA, 4), # y c(NA, 2, 3, 4), # z c(1, NA, 3, 3) # ) # # # 使用complete.cases函数筛选包含缺失值的数据行 # missing_rows <- !complete.cases(df) # # # …

Java的垃圾回收机制解说

Java 内存运行时区域中的程序计数器、虚拟机栈、本地方法栈随线程而生灭&#xff1b;栈中的栈帧随着方法的进入和退出而有条不紊地执行着出栈和入栈操作。每一个栈帧中分配多少内存基本上是在类结构确定下来时就已知的&#xff08;尽管在运行期会由 JIT 编译器进行一些优化&…

STM32+ESP8266连接阿里云

完整工程文件&#xff08;百度网盘免费下载&#xff0c;提取码&#xff1a;0625&#xff09;在文章末尾&#xff0c;需要请移步至文章末尾。 目录 宏定义配置 串口通信配置 消息解析及数据发送 ESP8266初始化 注意事项 完整工程文件 经过基础教程使用AT指令连接阿里云后…

使用vue3-treeselect问题

1.当vue3-treeselect是单选时&#xff0c;使用watch监听绑定value&#xff0c;无法监听到值清空 对照后将:value改为v-model&#xff0c;如图 2.使用vue3-treeselect全部清空按钮如何置空select的值&#xff0c;使用watch监听 多选&#xff1a;pageInfo.officeName(val) {// …

华为OD面试 - 简易Linux路径解析(Java JS Python C C++)

题目描述 某简易的 linux 目录系统 cd 命令(change directory)功能如下: cd:进入 home 目录 /home/usercd -:进入上一次停留的目录(连续两个以上 cd - 会在两个目录之间来回跳转,而不是回到更早之前的目录)cd <绝对路径>:以 / 开头的为绝对路径cd <相对路径…

【手写数据库内核组件】0201 哈希表hashtable的实战演练,多种非加密算法,hash桶的冲突处理,查找插入删除操作的代码实现

hash表原理与实战 ​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 文章目录 hash表…

【TB作品】51单片机 Proteus仿真 MAX7219点阵驱动数码管驱动

1、8乘8点阵模块&#xff08;爱心&#xff09; 数码管测试程序与仿真 实验报告: MAX7219 数码管驱动测试 一、实验目的 通过对 MAX7219 芯片的编程与控制&#xff0c;了解如何使用单片机驱动数码管显示数字&#xff0c;并掌握 SPI 通信协议的基本应用。 二、实验器材 51…

多项式求和之九(给定程序中函数 fun 的功能是:求出以下分数序列的前 n 项之和,并通过函数值返回 main 函数。)

代码 #include <stdio.h> /********found********/ double fun(int n){double a2,b1,c,s0;while(n>0){n--; /********found********/ssa/b;ca;aab;bc;}return s; } void main(){int n;scanf("%d",&n);printf("%lf\n",fun(n)); }友情提示 1、…