React native react-native-image-crop-picker 使用教程

17-08-17 20:20 字数 842 阅读 5056

react-native-image-crop-picker 是一个集成裁剪、压缩、多选等功能的第三方插件。兼容IOS&Android。

iOS/Android image picker with support for camera, configurable compression, multiple images and cropping

安装

npm i react-native-image-crop-picker --save 或者 yarn add react-native-image-crop-picker
react-native link react-native-image-crop-picker

上边的俩条命令执行成功后,需要编辑xcode的Info.plist文件 添加下面三个值

  1. NSPhotoLibraryUsageDescription [读取用户相册的描述]
  2. NSCameraUsageDescription [读取用户相机的描述]
  3. NSMicrophoneUsageDescription [读取用户麦克风的描述]

0654fe267e386aec767b665b9ebd7d40.png

然后打开xcodecdnode_modules/react-native-image-crop-picker/把该目录下的ios/ImageCropPickerSDK 目录拖拽到项目的根目录,并且确认Copy items if needed是选择状态。
然后点击project>General标签、在Deployment Info下确认设置Deployment Target8.0
Embedded Binaries下点击+号,添加RSKImageCropper.framework and QBImagePicker.framework

97e54d01f1c253fd87541348396ebcc9.png

3c4c8862ad8ff9cf43473864467ef549.png

ab74ffebfe09ac881de6ae3e1a956420.png

安装过程到此就结束了

然后在你的项目中import ImagePicker from 'react-native-image-crop-picker';就可以使用这个组件了。

具体的方法火属性可以参考github的文档。

不要忘记安装完成后清除你的xcode缓存。重新打开模拟器。

56ba85d93ccca3a507cb6db75030b844.png 1ac48aa7c8d038f37b5205f9ea4f8b60.png

0人点赞>
关注 收藏 改进 举报
0 条评论
排序方式 时间 投票
快来抢占一楼吧
请登录后发表评论
站长 @ 十七度
文章
380
粉丝
23
喜欢
191
收藏
31
排名 : 1
访问 : 130.1万
私信