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】)
react-native-image-picker 运用launchCamera直接调取摄像头的缺陷及修复的更多相关文章
- [书籍精读]《React Native精解与实战》精读笔记分享
写在前面 书籍介绍:本书由架构师撰写,包含ReactNative框架底层原理,以及与iOS.Android混合开发案例,精选了大量实例代码,方便读者快速学习.主要内容分为两大部分,第1部分" ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
- React Native学习-调取摄像头第三方组件:react-native-image-picker
近期做的软件中图片处理是重点,那么自然也就用到了相机照相或者相册选取照片的功能. react-native中有image-picker这个第三方组件,但是0.18.10这个版本还不是太支持iPad. ...
- React Native 在用户网络故障时自动调取缓存
App往往都有缓存功能,例如常见的新闻类应用,如果你关闭网络,你上次打开App加载的数据还在,只是不能加载新的数据了. 我的博客bougieblog.cn,欢迎前来尬聊. 集中处理请求 如果你fetc ...
- React Native组件只Image
不管在Android还是在ios原生的开发中,图片都是作为控件给出来的,在RN中也有这么一个控件(Image).根据官网的资料,图片分为本地静态图片,网络图片和混合app资源.一下分类介绍来源官网. ...
- 【转】【React Native开发】
[React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19) [React Native开发]React Native控件之Touchable*系列组 ...
- React Native专题
转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...
- 基于React Native的58 APP开发实践
React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...
- react native 中时间选择插件
npm install react-native-datepicker --save import DatePicker from 'react-native-datepicker'; <Vie ...
随机推荐
- error:java.lang.ClassCastException: java.lang.Integer cannot be cast to java.lang.Long
问题:mysql中id存的是int(10),java代码中的id为long,转不过去 解决:mysql中的int要是需要转到java中的long,需要选择unsigned这个选项,即if(unsign ...
- 读书笔记-浅析Java运行时数据区
作为一个 Java 为主语言的程序员,我偶尔也需要 用 C/C++ 写程序,在使用时让我很烦恼的一件事情就是需要对 new 出来的对象进行 delete/free 操作,我老是担心忘了这件事情,从而导 ...
- MarkDown 的使用学习
以下都是MarkDown常用的语法以及效果图: ### 生成目录 [TOC] ### 标题 标题的标签采用#加文本的形式,几个星就代表几级标题 在#后加空格 # 一级标题 ## 二级标题 ... # ...
- QTcreator打包发布可运行程序(基于QT5.7)
完成C++界面程序后,我们还需要对程序进行Release,然后进行打包,才可以直接运行.我在这期间绕了一个大弯,现在记录下来我的做法供参考. 正确步骤 第一步:将构建程序改为Release,然后构建项 ...
- CMake基本语法
CMake简介 CMake 是做什么的? CMake是一套类似于automake的跨平台辅助项目编译的工具. 我觉得语法更加简单易用. CMake的工作流程 CMake处理顶级目录的CMakeList ...
- PHP之防御sql注入攻击的方式
长期以来,web的安全性存在着巨大的争议与挑战.其中,sql注入就是一种常见的一种攻击方法,开发人员普遍的做法就是不停的过滤,转义参数,可是我们php大法天生弱类型的机制,总是让黑客有机可乘,绕过防御 ...
- Java内存区域之程序计数器--《深入理解Java虚拟机》学习笔记及个人理解(一)
Java虚拟机程序计数器 在书上的P39页 程序计数器干嘛的? 有了它,字节码解释器才可以知道下一条要执行的字节码指令是哪个. 无论是取下一条指令还是分支.循环.跳转.中断.线程恢复,都需要这个程序计 ...
- Java安装和环境变量配置
一.Java的安装 1.下载合适的版本,安装jdk和jre到同一路径下的同一文件夹下,例如:都安装在 E:\Java: 备注: JDK:Java Development Kit : JRE: Ja ...
- 使用nodegrass简单封装http请求例子
1.项目中经常性的使用http发送请求处理数据.而大部分请求方式为get和post,于是对http请求进行封装,提供代码的利用率. 2.nodegress是nodejs的一个请求工具. 具体步骤及代码 ...
- IMLite轻量级即时通信工具开发指南
花了一周时间开发了一个简单的即时通信工具,勉强算是程序原型.现在我把开发流程和一些个人的想法记录下来.本文首先介绍程序架构和通信接口,之后会聚焦到服务器的信号槽设计原则,接下来将解释有关TCP通信的粘 ...