react-native-image-picker 運用launchCamera直接調取攝像頭的缺陷及修復

　　在前幾天用react-native進行android版本開發當中，用到了“react-native-image-picker”的插件；根據業務的需求：點擊按鈕-->直接調取攝像頭進入拍照頁面-->拍照-->保存；也就是直接調取launchCamera，在實際操作中，調取攝像頭拍照&獲取圖片都沒有問題，但是當再次點擊拍照按鈕進入拍照頁面，進行“拍照不保存退出、OR進入拍照頁不拍照退出”這樣的操作時，會將第一次拍的照片文件損毀，也就是在頁面內有如下狀況：

 

點開查看大圖，也都是裂開的圖片；在需求急需解決的狀況下，我分析了該問題：

　　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】）