React-Native 中使用 react-native-image-crop-picker 在华为手机上不能正常使用拍照功能

背景:

React-Native 0.66 中使用 react-native-image-crop-picker 在安卓 华为手机上不能正常使用拍照功能, 其他品牌正常

代码如下:

复制代码
import ImagePicker from 'react-native-image-crop-picker';



ImagePicker.openCamera(photoOptions)
  .then(image => {
     callback(image);
  })

原因分析及解决办法:

通过在 openCamera中增加 catch 捕获异常发现, 在华为手机上调用拍照时有报错,

  1. Error: Cannot launch camera

poromiseMethodwrapper@http://localhost :8081/index .bundle?xxx

==> 在 android/app/src/main/AndroidManifest.xml 中增加 android:requestLegacyExternalStorage="true" 配置

  1. 再继续调试发现另外报错

Failed to find configured root that contains /storage/emulated/0/Android/data/com.jgpdapro/files/Pictures/image-4488cf2d-8a66-4254-a9d6-f198bb1515781214910780677416114.jpg

promiseMethodWrapper@http://localhost:8081/index.bundle?platform=android\&dev=true\&minify=false\&app=com.jgpdapro\&modulesOnly=false\&runModule=true:2084:45

http://localhost:8081/index.bundle?platform=android\&dev=true\&minify=false\&app=com.jgpdapro\&modulesOnly=false\&runModule=true:171700:57

==> 在 android/app/src/main/AndroidManifest.xml 中增加 android.support.FILE_PROVIDER_PATHS 配置

复制代码
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.xxx">


    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:usesCleartextTraffic="true"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:requestLegacyExternalStorage="true" 
      android:theme="@style/AppTheme">
        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.provider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths" />
        </provider>
    </application>
</manifest>

在 android/app/src/main/res/xml/下新增 file_paths.xml

复制代码
<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <external-path
        name="external_pictures"
        path="Android/data/com.xxx/files/Pictures/" />
</paths>

测试结果:

相关推荐
记得开心一点嘛7 小时前
Trellora:基于 Electron、React 和本地知识库的 AI 知识工作台
人工智能·react.js·electron
熊猫钓鱼>_>7 小时前
从闲置平板到家里的“控制大脑“:鸿蒙智慧中控面板完整实战
运维·人工智能·华为·自动化·电脑·ai编程·harmonyos
500847 小时前
React Native for OpenHarmony 实战:三方库 react-native-url-polyfill 的鸿蒙化适配指南
javascript·react native·react.js·性能优化·electron·harmonyos
传奇开心果编程9 小时前
【现代声明式UI学与练】第9课 性能优化——渲染优化、列表优化、内存优化、启动优化
学习·flutter·react native·ui·性能优化·swiftui·android jetpack
熊猫钓鱼>_>10 小时前
从2D平铺到3D沉浸:我用HarmonyOS 7端侧AI做了一个全程数据不出设备的空间化私密相册
前端·人工智能·3d·华为·华为云·harmonyos·鸿蒙
m0_7381858210 小时前
Flutter 鸿蒙化实战:foundation_fluttify 适配 OpenHarmony,Fluttify 桥接层
flutter·华为·harmonyos·鸿蒙
m0_7381858211 小时前
Flutter 鸿蒙化实战:http_proxy 适配 OpenHarmony,HTTP 代理
flutter·http·华为·harmonyos·鸿蒙
m0_7381858211 小时前
Flutter 鸿蒙化实战:headset_connection_event 适配 OpenHarmony,耳机插拔监听
flutter·华为·harmonyos·鸿蒙
5008412 小时前
React Native for OpenHarmony 实战:三方库 react-native-volume-control 的鸿蒙化适配指南
javascript·react native·react.js·electron·harmonyos
薛一半12 小时前
React-Redux三重优化实战揭秘
javascript·vue.js·react.js