react-native- images -crop-picker

最新推荐文章于 2024-08-09 07:03:35 发布

原创最新推荐文章于 2024-08-09 07:03:35 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#手机 #react-native #图片上传

react-native 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在react-native项目中使用images-crop-picker组件进行图片上传的步骤，包括安装、基本使用和iOS的配置细节，如在xcode中添加Embedded Binaries和修改info.plist文件以访问相册和相机权限。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用react-native 制作毕设的过程中，需要用到手机相册，发现react-native- images -crop-picker 组件不错。

1、安装

npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker

2、使用

引入 ：import ImagePicker from 'react-native-image-crop-picker';
从相册中选择单张图片：
ImagePicker.openPicker({
  width: 300,
  height: 400,
  cropping: true
}).then(image => {
  console.log(image);
});
从相册中选择多张图片：
ImagePicker.openPicker({
  multiple: true
}).then(images => {
  console.log(images);
});
拍照：
ImagePicker.openPicker({
  multiple: true
}).then(images => {
  console.log(images);
});
返回的资源对象(images)：
path(string):图片地址
data(base64):图片base64格式数据流
mime（string):图片格式
width(number):图片宽度
height(number):图片高度
size(number):图片大小

3、使用前需要注意的
在xcode中将项目打开，找到Embedded Binaries, 点击+,添加

RSKImageCropper.framework
QBImagePicker.framework

另外，需要在info.plist文件中，添加键值对，允许访问相册和相机

访问相机:NSCameraUsageDescription   
访问相册：NSPhotoLibraryUsageDescription

附其他参数：

<key>NSCameraUsageDescription</key>
<string>App需要您的同意,才能访问相机</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>App需要您的同意,才能访问相册</string>

<key>NSContactsUsageDescription</key>
<string>App需要您的同意,才能访问通讯录</string>

<key>NSLocationAlwaysUsageDescription</key>
<string>App需要您的同意,才能始终访问位置</string>

<key>NSLocationUsageDescription</key>
<string>App需要您的同意,才能访问位置</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>App需要您的同意,才能在使用期间访问位置</string>

<key>NSMicrophoneUsageDescription</key>
<string>App需要您的同意,才能访问麦克风</string>

<key>NSBluetoothPeripheralUsageDescription</key>
<string>App需要您的同意,才能访问蓝牙</string>

<key>NSCalendarsUsageDescription</key>
<string>App需要您的同意,才能访问日历</string>

<key>NSAppleMusicUsageDescription</key>
<string>App需要您的同意,才能访问媒体资料库</string>

<key>NSHealthShareUsageDescription</key>
<string>App需要您的同意,才能访问健康分享</string>

<key>NSHealthUpdateUsageDescription</key>
<string>App需要您的同意,才能访问健康更新</string>

<key>NSMotionUsageDescription</key>
<string>App需要您的同意,才能访问运动与健身</string>

<key>NSRemindersUsageDescription</key>
<string>App需要您的同意,才能访问提醒事项</string>