react-native- images -crop-picker

来源：互联网发布：百度地图js api 缩放编辑：程序博客网时间：2024/06/15 20:09

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

1、安装

npm i react-native-image-crop-picker --savereact-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.frameworkQBImagePicker.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>

以上为ios配置，详细配置以及android的配置可以参照github上的react-native- images -crop-picker官方项目介绍

其他相册选择第三方库：
react-native-camera-roll-picker
react-native-image-picker

2 0