2018年第一个RN项目中,充满了刺激也结识了不少大牛,在此感谢~
[react-native-image-picker]该库可以实现启动本地相册和照相机来采集图片,但是作者没有实现裁剪功能,针对头像上传的需求,一般都需要对图片进行裁剪。所以本篇和大家分享另一个开源库:[react-native-image-crop-picker],实现了本地相册和照相机来采集图片,并且提供多选、图片裁剪等功能,支持[iOS]和[Android]两个平台:
本文主要为非IOS开发和安卓开发的同学,提供帮助少走弯路,谢谢!
@npm地址:https://www.npmjs.com/package/react-native-image-crop-picker(包含配置和)
IOS环境配置:
自己在配置过程中,踩了很多坑,为了避免未知的错误,所以IOS只推荐用Cocoapods:
-
Step 1:
-
Step 2:
-
Step 3:在ios/Podfile中编辑,sample如下图:
Step3.png
-
Step 4:pod install
- Step 5:配置Xcode,打开项目名.xcworkspace:在Xcode中打开Info.plist,并添加带有值的字符串
NSPhotoLibraryUsageDescription
,描述为什么需要访问用户照片以及NSCameraUsageDescription
/NSMicrophoneUsageDescription
。
Step5.png
- Step 6: 配置完成,react-native run-ios即可。
坑1:pod install报错找不到具体的xcode.pro:
ios项目下必须只有一个子工程,多余删除即可.
坑2:CFBundleIdentifier", Does Not Exist:
原因:其中某些包不完整,或者之前项目的缓存问题造成的;
1.在项目目录下输入rm -rf node_modules && rm -rf ~/.rncache && yarn;
2.npm install ;
如果不生效,手动删除nodemodules/build/ rm -rf ~/.rncache 重新yarn即可.
坑3:'config.h' file not found
原因:依然是缓存问题造成的,所有直接清除相关缓存和node modules,在重新安装即可。
坑4:Incorrect hash:eb7c61ff0c1c55cd85deb3c15f2731c14c787429 ?/Users/johndoe/.rncache/boost_1_63_0.tar.gz
请参考:https://stackoverflow.com/questions/48522015/react-native-react-native-run-ios 。
网友评论