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

时间:2023-03-09 03:32:21
react-native-image-picker 运用launchCamera直接调取摄像头的缺陷及修复

  在前几天用react-native进行android版本开发当中,用到了“react-native-image-picker”的插件;根据业务的需求:点击按钮-->直接调取摄像头进入拍照页面-->拍照-->保存;也就是直接调取launchCamera,在实际操作中,调取摄像头拍照&获取图片都没有问题,但是当再次点击拍照按钮进入拍照页面,进行“拍照不保存退出、OR进入拍照页不拍照退出”这样的操作时,会将第一次拍的照片文件损毁,也就是在页面内有如下状况:

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

点开查看大图,也都是裂开的图片;在需求急需解决的状况下,我分析了该问题:

  Q1、该照片被删除,但是本地相册未及时刷新;

  Q2、该图片未被删除,只是被暂时的损毁掉了;

鉴于以上两种可能,我进行的对应操作是:

  方法1:(对应Q1)在再次点击拍照按钮时,进行本地文件的实际删除操作,也就是删除照片实体文件;(但是由于android功力不够,该方法并未成功)

  code(删除):

 @ReactMethod
private void deleteImage(String fileName, String uri, Callback callback) {
try {
File file = new File(fileName);
if (file.exists())
file.delete();
ContentResolver mContentResolver = this.getContentResolver();
String where = MediaStore.Images.Media.DATA + "='" + fileName + "'";
// 删除操作
mContentResolver.delete(Uri.parse(uri), where, null);
//刷新操作
File delete_file = new File(uri);
// 扫描单个媒体文件,注意是文件,不是文件夹
new SingleMediaScanner(this, delete_file);
callback.invoke("删除成功");
// else
// callback.invoke('删除失败'); } catch (Exception e) {
} }

code:(刷新)

 public class SingleMediaScanner implements MediaScannerConnection.MediaScannerConnectionClient {

     private MediaScannerConnection mMs;
private File mFile; public SingleMediaScanner(Context context, File f) {
mFile = f;
mMs = new MediaScannerConnection(context, this);
mMs.connect();
} @Override
public void onMediaScannerConnected() {
mMs.scanFile(mFile.getAbsolutePath(), null);
} @Override
public void onScanCompleted(String path, Uri uri) {
mMs.disconnect();
} }

  方法2:(对应Q2)对launchCamera的源码进行调整,如下,

code(修改插件react-native-image-picker源码)

 // NOTE: Currently not reentrant / doesn't support concurrent requests
@ReactMethod
public void launchCamera(final ReadableMap options, final Callback callback)
{
//新加begin
Activity currentActivity = getCurrentActivity(); if (currentActivity == null)
{
responseHelper.invokeError(callback, "can't find current Activity");
return;
}
//新加end if (!isCameraAvailable())
{
responseHelper.invokeError(callback, "Camera not available");
return;
}
// 注释掉原有的代码
// final Activity currentActivity = getCurrentActivity();
// if (currentActivity == null)
// {
// responseHelper.invokeError(callback, "can't find current Activity");
// return;
// } this.options = options;
//新加begin
imageConfig = new ImageConfig(null, null, 0, 0, 100, 0, false);
//新加end
if (!permissionsCheck(currentActivity, callback, REQUEST_PERMISSIONS_FOR_CAMERA))
{
return;
} parseOptions(this.options); int requestCode;
Intent cameraIntent; if (pickVideo)
{
requestCode = REQUEST_LAUNCH_VIDEO_CAPTURE;
cameraIntent = new Intent(MediaStore.ACTION_VIDEO_CAPTURE);
cameraIntent.putExtra(MediaStore.EXTRA_VIDEO_QUALITY, videoQuality);
if (videoDurationLimit > 0)
{
cameraIntent.putExtra(MediaStore.EXTRA_DURATION_LIMIT, videoDurationLimit);
}
}
else
{
requestCode = REQUEST_LAUNCH_IMAGE_CAPTURE;
cameraIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); final File original = createNewFile(reactContext, this.options, false);
imageConfig = imageConfig.withOriginalFile(original); cameraCaptureURI = RealPathUtil.compatUriFromFile(reactContext, imageConfig.original);
if (cameraCaptureURI == null)
{
responseHelper.invokeError(callback, "Couldn't get file path for photo");
return;
}
cameraIntent.putExtra(MediaStore.EXTRA_OUTPUT, cameraCaptureURI);
} if (cameraIntent.resolveActivity(reactContext.getPackageManager()) == null)
{
responseHelper.invokeError(callback, "Cannot launch camera");
return;
} this.callback = callback; try
{
currentActivity.startActivityForResult(cameraIntent, requestCode);
}
catch (ActivityNotFoundException e)
{
e.printStackTrace();
responseHelper.invokeError(callback, "Cannot launch camera");
}
}

如此,便完成了对该操作的问题修复;

(备注:第一种的解决方案可行,但是开发有误,如果哪位同学有好的想法,还请告知;对于react-native-image-picker插件的相关问题,哪位同学还有其他好的开发经验,可以随时分享讨论:【qq 930369018】)