在前几天用react-native进行android版本开发当中,用到了“react-native-image-picker”的插件;根据业务的需求:点击按钮-->直接调取摄像头进入拍照页面-->拍照-->保存;也就是直接调取launchCamera,在实际操作中,调取摄像头拍照&获取图片都没有问题,但是当再次点击拍照按钮进入拍照页面,进行“拍照不保存退出、OR进入拍照页不拍照退出”这样的操作时,会将第一次拍的照片文件损毁,也就是在页面内有如下状况:
点开查看大图,也都是裂开的图片;在需求急需解决的状况下,我分析了该问题:
Q1、该照片被删除,但是本地相册未及时刷新;
Q2、该图片未被删除,只是被暂时的损毁掉了;
鉴于以上两种可能,我进行的对应操作是:
方法1:(对应Q1)在再次点击拍照按钮时,进行本地文件的实际删除操作,也就是删除照片实体文件;(但是由于android功力不够,该方法并未成功)
code(删除):
1 @ReactMethod 2 private void deleteImage(String fileName, String uri, Callback callback) { 3 try { 4 File file = new File(fileName); 5 if (file.exists()) 6 file.delete(); 7 ContentResolver mContentResolver = this.getContentResolver(); 8 String where = MediaStore.Images.Media.DATA + "='" + fileName + "'"; 9 // 删除操作10 mContentResolver.delete(Uri.parse(uri), where, null);11 //刷新操作12 File delete_file = new File(uri);13 // 扫描单个媒体文件,注意是文件,不是文件夹14 new SingleMediaScanner(this, delete_file);15 callback.invoke("删除成功");16 // else17 // callback.invoke('删除失败');18 19 } catch (Exception e) {20 }21 22 }
code:(刷新)
1 public class SingleMediaScanner implements MediaScannerConnection.MediaScannerConnectionClient { 2 3 private MediaScannerConnection mMs; 4 private File mFile; 5 6 public SingleMediaScanner(Context context, File f) { 7 mFile = f; 8 mMs = new MediaScannerConnection(context, this); 9 mMs.connect();10 }11 12 @Override13 public void onMediaScannerConnected() {14 mMs.scanFile(mFile.getAbsolutePath(), null);15 }16 17 @Override18 public void onScanCompleted(String path, Uri uri) {19 mMs.disconnect();20 }21 22 }
方法2:(对应Q2)对launchCamera的源码进行调整,如下,
code(修改插件react-native-image-picker源码)
1 // NOTE: Currently not reentrant / doesn't support concurrent requests 2 @ReactMethod 3 public void launchCamera(final ReadableMap options, final Callback callback) 4 { 5 //新加begin 6 Activity currentActivity = getCurrentActivity(); 7 8 if (currentActivity == null) 9 {10 responseHelper.invokeError(callback, "can't find current Activity");11 return;12 }13 //新加end14 15 if (!isCameraAvailable())16 {17 responseHelper.invokeError(callback, "Camera not available");18 return;19 }20 // 注释掉原有的代码21 // final Activity currentActivity = getCurrentActivity();22 // if (currentActivity == null)23 // {24 // responseHelper.invokeError(callback, "can't find current Activity");25 // return;26 // }27 28 this.options = options;29 //新加begin30 imageConfig = new ImageConfig(null, null, 0, 0, 100, 0, false);31 //新加end32 if (!permissionsCheck(currentActivity, callback, REQUEST_PERMISSIONS_FOR_CAMERA))33 {34 return;35 }36 37 parseOptions(this.options);38 39 int requestCode;40 Intent cameraIntent;41 42 if (pickVideo)43 {44 requestCode = REQUEST_LAUNCH_VIDEO_CAPTURE;45 cameraIntent = new Intent(MediaStore.ACTION_VIDEO_CAPTURE);46 cameraIntent.putExtra(MediaStore.EXTRA_VIDEO_QUALITY, videoQuality);47 if (videoDurationLimit > 0)48 {49 cameraIntent.putExtra(MediaStore.EXTRA_DURATION_LIMIT, videoDurationLimit);50 }51 }52 else53 {54 requestCode = REQUEST_LAUNCH_IMAGE_CAPTURE;55 cameraIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);56 57 final File original = createNewFile(reactContext, this.options, false);58 imageConfig = imageConfig.withOriginalFile(original);59 60 cameraCaptureURI = RealPathUtil.compatUriFromFile(reactContext, imageConfig.original);61 if (cameraCaptureURI == null)62 {63 responseHelper.invokeError(callback, "Couldn't get file path for photo");64 return;65 }66 cameraIntent.putExtra(MediaStore.EXTRA_OUTPUT, cameraCaptureURI);67 }68 69 if (cameraIntent.resolveActivity(reactContext.getPackageManager()) == null)70 {71 responseHelper.invokeError(callback, "Cannot launch camera");72 return;73 }74 75 this.callback = callback;76 77 try78 {79 currentActivity.startActivityForResult(cameraIntent, requestCode);80 }81 catch (ActivityNotFoundException e)82 {83 e.printStackTrace();84 responseHelper.invokeError(callback, "Cannot launch camera");85 }86 }
如此,便完成了对该操作的问题修复;
(备注:第一种的解决方案可行,但是开发有误,如果哪位同学有好的想法,还请告知;对于react-native-image-picker插件的相关问题,哪位同学还有其他好的开发经验,可以随时分享讨论:【qq 930369018】)