在前几天用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 //                    else
17 //            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     @Override
13     public void onMediaScannerConnected() {
14         mMs.scanFile(mFile.getAbsolutePath(), null);
15     }
16
17     @Override
18     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     //新加end
14
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     //新加begin
30     imageConfig = new ImageConfig(null, null, 0, 0, 100, 0, false);
31     //新加end
32     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     else
53     {
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     try
78     {
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

react-native-image-picker 运用launchCamera直接调取摄像头的缺陷及修复相关推荐

  1. React Native Android 从学车到补胎和成功发车经历

    [工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 好几个月没发车了,完全生疏了,为了接下来能持续性的发好车,这次先准 ...

  2. React Native组件之Switch和Picker和Slide

    React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...

  3. React native 照片压缩上传

    在用React native做项目的时候,遇到了照片的压缩上传问题.在很多RN技术交流群中,询问到的结果也是让用原生.但这里就遇到了RN和原生之间的兼容问题. 在不懈努力之下,终于找到了一个Image ...

  4. React Native开发之常用第三方控件

    前言 http://blog.csdn.net/xiangzhihong8/article/details/53968573 React Native出来一年多了,受到各大开发人员的喜爱,但是由于只是 ...

  5. 初步了解React Native的新组件库firstBorn

    first-born is a React Native UI Component Framework, which follows the design methodology Atomic Des ...

  6. react native native module

    React Native Native Modules,官方地址:https://facebook.github.io/react-native/docs/native-modules-android ...

  7. 【转】【React Native开发】

    [React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19)  [React Native开发]React Native控件之Touchable*系列组 ...

  8. native封装卡片 react_自己动手封装一个React Native多级联动

    背景 肯定是最近有一个项目,需要一个二级联动功能了! 本来想封装完整之后,放在github上面赚星星,但发现市面上已经有比较成熟的了,为什么我在开发之前没去搜索一下(项目很赶进度),泪崩啊,既然已经封 ...

  9. 什么是 Native、Web App、Hybrid、React Native和Weex?

    一句话概要 Native.Web App.Hybrid.React Native(后面以RN简称).Weex 间的异同点,后期同步小程序和PWA. App常用开发模式简介 此处App为应用,appli ...

最新文章

  1. 《LeetCode力扣练习》第14题 C语言版 (做出来就行,别问我效率。。。。)
  2. ngx_lua应用最佳实践
  3. Swift - 添加、修改、删除通讯录联系人
  4. opencv 线性滤波器
  5. 深入出不来nodejs源码-编译启动
  6. java获取异常的数据_Java(8题):异常,通过try catch进行处理,登录,商品,使用jdbc进行读取,详细图析...
  7. Struts2 学习系列 (2) 访问web资源
  8. vue-cli3使用svg图标的详细步骤
  9. hadoop--常见错误及解决方法
  10. Android JNI
  11. vue使用coreUI的CDataTable踩坑记录
  12. Mysql5.7与8.0版本不兼容问题
  13. AUC(ROC曲线下方的面积大小)
  14. OAuth2 oauth_client_details表字段的详细说明
  15. 如何更改本地网页网址
  16. python爬虫入门实战之爬取美国体育网篮球比赛数据(selenium+xpath)
  17. 【APP自动化测试】Python + Appium + 模拟器 +UiAutomatorViewer 实现APP自动化测试
  18. python中如何打开csv文件_Python对CSV文件的处理
  19. oracle 索引快速全扫描,使用索引快速全扫描(Index FFS)避免全表扫描的若干场景
  20. 32位64位Eclipse和jdk对应关系说明【初学者适用】

热门文章

  1. 双脑协同RSVP目标检测
  2. 运用UE和Blocks,仅用两周打造一个VR游戏(52VR完整版译文)
  3. 安卓13来了!首个开发者版公布,三方图标随壁纸变色,电量管理系统也安排上了...
  4. Science:人类在实验室创建了微型“大脑”,含祖先基因的那种
  5. 2840页的计算机毕业论文,德州奥斯汀华人博士究竟写了啥
  6. 科学家:冬天,就应该睡饱了再起床上班!
  7. 叮~ 量子位欢迎你加入AI群聊
  8. 谷歌砸出10亿美元,要为湾区困难群众,建2万套经适房
  9. JBoss 系列八十一: jBPM 6 中使用 jbpm-console 创建执行 BPM 流程 - II
  10. 什么是分布式系统!以及分布式系统架构的优缺点!