RN在android手机剪切图片的操作

之前写过一个React Native调用摄像头画面及拍照和保存图片到相册全流程但是这个仅限于调用摄像头拍照并保存图片,今天再写一个版本的操作,这个博客目前实现的有三点操作:

  1. 调用摄像头拍照
  2. 对照片进行剪切
  3. 从相册选取图片

功能上面来说有两点:

  1. 点击按钮可以对摄像头进行拍照,拍完照会自动跳转到编辑页面,编辑完后图片会显示到页面上面
  2. 相册选取图片,选择完了自动跳转到图片编辑页面,编辑完了会显示到页面上

下面就是实现步骤

安装下面的依赖包

yarn add react-native-image-crop-picker

在RN项目下android/app/src/main/AndroidManifest.xml文件内加入以下权限申请(调用摄像头权限)

...
<uses-permission android:name="android.permission.CAMERA"/>
...

在RN项目新加个页面,放入以下代码

import React, { useState } from 'react';
import { View, Button, Image } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';const MyComponent = () => {const [image, setImage] = useState(null);const handleCameraPress = async () => {try {const pickedImage = await ImagePicker.openCamera({cropping: true,cropperCircleOverlay: false,width: 300,height: 300,cropperToolbarTitle: '',cropperToolbarColor: 'black',cropperActiveWidgetColor: '#ffffff',cropperStatusBarColor: 'black',cropperToolbarWidgetColor: '#ffffff',cropperToolbarVisible: false,hideBottomControls: true,freeStyleCropEnabled: false});setImage(pickedImage.path);} catch (error) {console.log('Error:', error);}};const handleGalleryPress = async () => {try {const pickedImage = await ImagePicker.openPicker({cropping: true,cropperCircleOverlay: false,width: 300,height: 300,cropperToolbarTitle: '',cropperToolbarColor: 'black',cropperActiveWidgetColor: '#ffffff',cropperStatusBarColor: 'black',cropperToolbarWidgetColor: '#ffffff',cropperToolbarVisible: false,hideBottomControls: true,freeStyleCropEnabled: false});setImage(pickedImage.path);} catch (error) {console.log('Error:', error);}};return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>{image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}<Button title="拍照并裁剪" onPress={handleCameraPress} /><Button title="从相册选择并裁剪" onPress={handleGalleryPress} /></View>);
};export default MyComponent;

在这里插入图片描述
PS:如果这里有爆红先不用管,因为path是ImagePicker返回回来的对象里面的属性,编辑器不知道,默认就是未识别的属性,反正代码能跑通

然后直接看页面运行就好,下面贴几个效果图

页面样式
在这里插入图片描述

截图页面样式

在这里插入图片描述

选取相册图片

在这里插入图片描述

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

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

相关文章

月入10.5k;36岁生物专业转行网优,选择真的比努力更重要!

张雪峰说&#xff1a;普通家庭的孩子选择专业首要要考虑的是能不能就业&#xff1f;能不能拿到高薪&#xff1f;因为除了你的父母&#xff0c;没人会对你的未来负责。 学历和专业哪个更重要&#xff1f;不同的人往往会有不同的解答&#xff0c;今天故事的主人公H先生毕业于武汉…

2.4 死锁

1 2 3 4 5 6 7 8 9 10 11 12 13

github加速神器!解决github巨慢的问题,并且能够加速下载!另外推荐GitKraken -- 超好用的 Git 可视化工具

FastGithub github加速神器&#xff0c;解决github打不开、用户头像无法加载、releases无法上传下载、git-clone、git-pull、git-push失败等问题。 下载地址&#xff1a; 清华云盘 2 部署方式 2.1 windows-x64桌面 双击运行FastGithub.UI.exe 2.2 windows-x64服务 fastgi…

工业以太网无线网桥

一、功能概述 1.1设备简介 本产品是工业以太网&#xff08;Profinet、EtherNet/IP、ModbusTCP等&#xff09;转无线设备&#xff0c;成对使用&#xff08;一对一&#xff09;&#xff0c;本产品出厂前已经配对好&#xff0c;用户不需要再配对&#xff0c;即插即用。 本产品适…

当下国内共享办公室和国外的有什么不同

共享办公室&#xff0c;也被称为联合办公空间&#xff08;Coworking Space&#xff09;&#xff0c;是一种为自由职业者、独立承包商、初创企业以及远程工作者提供灵活、共享工作空间的办公模式。这种办公方式起源于美国硅谷&#xff0c;随着远程工作和自由职业的兴起而逐渐流行…

WIFI驱动移植实验: wireless tools 工具测试

一. 简介 前面一篇文章交叉编译了 wireless tools 工具&#xff0c;并移植到开发板文件系统上。文章如下&#xff1a; WIFI驱动移植实验&#xff1a; wireless tools 工具移植-CSDN博客 本文对 所移植的操作 WIFI设备的工具 wireless tools进行测试。确认是否可以使用。 二…

Laravel扩展包的开发

扩展包的开发 1. 创建一个新项目&#xff0c;初始化扩展包配置 首先创建一个全新的Laravel项目&#xff1a; composer create-project --prefer-dist laravel/laravel laravelPkg 接下来&#xff0c;在项目中创建目录package/{your_name}/{your_package_name} mkdir -p pa…

在点集的新知识面前百年集论不堪一击

黄小宁 与x∈R相异&#xff08;等&#xff09;的实数均可表为yxδ&#xff08;增量δ可0也可≠0&#xff09;&#xff0c;因各实数的绝对值都可是表示长度的数故各实数都可是数轴上点的坐标&#xff0c;于是x∈R变换为实数yxδ的几何意义可是&#xff1a;一维空间“管道”g内R…

Python程序设计 循环结构(二)

1.斐波那契数列 编写一个能计算斐波那契数列中第x个数的小程序。斐波那契数列&#xff08;Fibonacci sequence&#xff09;&#xff0c;又称黄金分割数列、 因数学家莱昂纳多斐波那契&#xff08;Leonardoda Fibonacci&#xff09;以兔子繁殖为例子而引入&#xff0c;故又称为…

Sublime for Mac 使用插件Terminus

1. 快捷键打开命令面板 commandshiftp2. 选择 Package Control: Install Package&#xff0c;然后会出现安装包的列表 3. 在安装终端插件前&#xff0c;我们先装个汉化包&#xff0c;ChineseLocallization&#xff0c;安装完重启 4. 输入 terminus&#xff0c;选择第一个&am…

【C++】从C到C++、从面向过程到面向对象(类与对象)

文章目录 C入门知识C与C的关系1. 类的引入&#xff1a;从结构体到类2. 类的声明和定义3. 类的作用域4. 类的访问限定符5. 面向对象特性之一&#xff1a;封装6. 类的实例化&#xff1a;对象7. 计算类对象的内存大小8. 成员函数中暗藏的this指针9. 类的六个默认生成的成员函数9.1…

iptables添加端口映射,k8s主机查询不到端口但能访问。

研究原因&#xff1a;k8s内一台主机使用命令查询没有80端口。但通过浏览器访问又能访问到服务。 查询了资料是使用了hostport方式暴露pod端口。cni调用iptables增加了DNAT规则。访问时流量先经过iptables直接被NAT到具体服务去了。 链接: K8s罪魁祸首之"HostPort劫持了我…

MySql实战--事务到底是隔离的还是不隔离的

第3篇文章和你讲事务隔离级别的时候提到过&#xff0c;如果是可重复读隔离级别&#xff0c;事务T启动的时候会创建一个视图read-view&#xff0c;之后事务T执行期间&#xff0c;即使有其他事务修改了数据&#xff0c;事务T看到的仍然跟在启动时看到的一样。也就是说&#xff0c…

外贸资讯 | 你看不上的邻居1-2月从中国进口额猛增

你看不上的邻居1-2月进口额猛增 被你猜对了&#xff0c;是印度 先是在俄罗斯最近的新闻报道里说&#xff0c;1月份中国成为印度主要贸易伙伴&#xff1a;两国贸易额增长16%&#xff0c;达到105亿美元。 然后去查了印度海关数据&#xff0c;也是中国排在第一&#xff0c;有意…

Stable Diffusion XL之核心基础内容

Stable Diffusion XL之核心基础内容 一. Stable Diffusion XL核心基础内容1.1 Stable Diffusion XL的主要优化1.2 SDXL整体架构初识1.3 VAE模型1.VAE基本介绍2. VAE基本模型结构3.VAE的训练 1.4 U-Net模型&#xff08;Base部分&#xff09;1. 十四个基本模块概述2. SDXL_Spatia…

SwiftUI Release 引入的辅助焦点管理

文章目录 前言使用 FocusState 属性包装器高级技巧&#xff1a;专用辅助技术可聚焦字段的高级用法优化体验运行截图总结 前言 SwiftUI Release 引入了强大的新功能&#xff0c;其中之一是辅助焦点管理。 这个新功能使得在SwiftUI中处理辅助技术&#xff08;如 VoiceOver 和 S…

百度谷歌301强引蜘蛛池效果怎么样

301强引蜘蛛池效果怎么样 本文 虚良SEO 原创&#xff0c;转载保留链接&#xff01;网址&#xff1a;百度谷歌301强引蜘蛛池效果怎么样 - 虚良SEO 随着搜索引擎优化&#xff08;SEO&#xff09;技术的发展&#xff0c;越来越多的网站开始采用蜘蛛池技术来提高网站的排名和流量。…

关于Kubernetes-v1.23.6-资源调度-StatefulSet-OnDelete当删除的时候才更新

前面提到的普通的滚动更新&#xff0c;都是修改完sts立即就会发生更新操作 而还有一种更新的策略为&#xff0c; OnDelete&#xff0c;即只有在 pod 被删除时会进行更新操作 还是先看一下web这个sts的当前更新策略如下&#xff1a; 这里我们修改&#xff0c;更新策略&#xf…

【创作纪念日】1024回忆录

不知不觉中&#xff0c;从创作第一篇文章到现在&#xff0c;已经1024天了&#xff0c;两年多的时间里&#xff0c;已经从硕士到博士了&#xff0c;1024&#xff0c;对于程序员来说&#xff0c;是个特别的数字吧&#xff0c;在此回忆与记录一下这些美好的经历吧。 缘起 很早以前…

UE5C++学习(四)--- SaveGame类存储和加载数据

上一篇说到使用数据表读取数据&#xff0c;如果我开始玩游戏之后&#xff0c;被怪物打了失去了一部分血量&#xff0c;这个时候我想退出游戏&#xff0c;当我再次进入的时候&#xff0c;希望仍然保持被怪物打之后的血量&#xff0c;而不是重新读取了数据表&#xff0c;这个时候…