当前位置: 首页 > news >正文

React Native打开相册选择图片或拍照 -- react-native-image-picker

官方文档:https://www.npmjs.com/package/react-native-image-picker

场景:点击按钮打开相册选择图片或者点击按钮拍照

import { launchCamera, launchImageLibrary } from 'react-native-image-picker';// ...
<TouchableOpacityactiveOpacity={0.7}onPress={async() => {// 调相册选择图片const { assets } = await launchImageLibrary({mediaType: 'photo',quality: 1,includeBase64: false, // 是否要返回base64selectionLimit: 2 // 选择个数})if (!assets?.length) {return}console.log(assets[0])setPhotoImg(assets[0].uri) // uri可以用Image显示// 或者调摄像头拍照//     const { assets } = await launchCamera({//         mediaType: 'photo',//         cameraType: 'back',//         quality: 1,//         includeBase64: false,//         saveToPhotos: false // 是否保存到相册//     })//    if (!assets?.length) {//         return//     }//     console.log(assets[0])//     setPhotoImg(assets[0].uri)}}><Text>选择图片</Text></TouchableOpacity>

选中图片assets[0]结构:
在这里插入图片描述
注意:选中的图片如果要显示在页面,用返回值中的uri

<Imagestyle={{width: 160, height: 160}} source={{uri: photoImg}}
/>
http://www.dtcms.com/a/284027.html

相关文章:

  • CSDN首发:研究帮平台深度评测——四大AI引擎融合的创作革命
  • MySQL安全修改表结构、加索引:ON-Line-DDL工具有哪些
  • mapbox V3 新特性,添加模型图层
  • 深入GPU硬件架构及运行机制
  • OpenCV学习笔记二(色彩空间:RGB、HSV、Lab、mask)
  • 多维动态规划题解——最长公共子序列【LeetCode】空间优化:两个数组(滚动数组)
  • Python eval函数详解 - 用法、风险与安全替代方案
  • Java使用FastExcel实现模板写入导出(多级表头)
  • 设计模式四:装饰模式(Decorator Pattern)
  • maven本地仓库清缓存py脚本
  • 设计模式笔记_结构型_装饰器模式
  • centos中新增硬盘挂载文件夹
  • Install Docker Engine on UbuntuMySQL
  • 【安卓按键精灵辅助工具】adb调试工具连接安卓模拟器异常处理
  • Vuex中store
  • 爬虫核心原理与入门技巧分析
  • JavaScript中的Window对象
  • Vue3入门-组件及组件化
  • Sentinel配置Nacos持久化
  • Python爬虫实战:研究cssutils库相关技术
  • AI问答-供应链管理:各种交通运输方式货运成本分析
  • 如何用文思助手改好一篇烂材料
  • maven(配置)
  • clonezilla 导出自动化恢复iso
  • 信息安全基础专业面试知识点(上:密码学与软件安全)
  • 解锁 iOS 按键精灵辅助工具自动化新可能:iOSElement.Click 让元素交互更简单
  • springmvc跨域解决方案
  • RAG实战指南 Day 18:Chroma、Milvus与Pinecone实战对比
  • 基于springboot+vue+mysql框架的工作流程管理系统的设计与实现(源码+论文+PPT答辩)
  • 23种设计模式--#2单例模式