博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react-native-image-picker 运用launchCamera直接调取摄像头的缺陷及修复
阅读量:6113 次
发布时间:2019-06-21

本文共 4706 字,大约阅读时间需要 15 分钟。

  在前几天用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】)

转载于:https://www.cnblogs.com/wolfjobs/p/7879200.html

你可能感兴趣的文章
bulk
查看>>
js document.activeElement 获得焦点的元素
查看>>
C++ 迭代器运算
查看>>
【支持iOS11】UITableView左滑删除自定义 - 实现多选项并使用自定义图片
查看>>
day6-if,while,for的快速掌握
查看>>
JavaWeb学习笔记(十四)--JSP语法
查看>>
【算法笔记】多线程斐波那契数列
查看>>
java8函数式编程实例
查看>>
jqgrid滚动条宽度/列显示不全问题
查看>>
在mac OS10.10下安装 cocoapods遇到的一些问题
查看>>
angularjs表达式中的HTML内容,如何不转义,直接表现为html元素
查看>>
css技巧
查看>>
Tyvj 1728 普通平衡树
查看>>
[Usaco2015 dec]Max Flow
查看>>
javascript性能优化
查看>>
多路归并排序之败者树
查看>>
java连接MySql数据库
查看>>
转:Vue keep-alive实践总结
查看>>
android studio修改新项目package名称
查看>>
深入python的set和dict
查看>>