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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是react-native-common-date-picker的介绍: react-native-common-date-picker是一个React Native的日期选择器组件,支持年月日格式的日期选择。该组件适用于iOS和Android平台,并且可以自定义样式和参数。 使用react-native-common-date-picker,你可以轻松地在你的React Native应用程序中添加日期选择器功能。该组件提供了多种可选参数,例如日期格式、最小日期、最大日期、默认日期等等,以便你根据自己的需求进行自定义。 以下是一个使用react-native-common-date-picker的例子: ```javascript import React, { useState } from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; import DatePicker from 'react-native-common-date-picker'; const App = () => { const [date, setDate] = useState(new Date()); const handleDateChange = (newDate) => { setDate(newDate); }; return ( <View> <TouchableOpacity onPress={() => this.datePicker.onPressDate()}> <Text>{date.toLocaleDateString()}</Text> </TouchableOpacity> <DatePicker ref={(picker) => { this.datePicker = picker; }} style={{ width: 0, height: 0 }} mode="date" date={date} onDateChange={handleDateChange} /> </View> ); }; export default App; ``` 在上面的例子中,我们首先导入了react-native-common-date-picker组件,并在组件中使用useState钩子来管理日期状态。然后,我们在TouchableOpacity组件中渲染了当前日期,并在用户点击该组件时打开了日期选择器。最后,我们将DatePicker组件添加到了视图中,并将其隐藏在了一个看不见的位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值