Ionic嵌入原生Camera功能失效问题解决

项目演示代码地址GitHub:IonicMixNative

最近由于公司需求,用到了ionic嵌入原生Android项目.

关于ionic嵌入原生可以参考下面的文章.

《把 Cordova Webview 嵌入 Android Native App》


好了,现在说问题.
我使用Ionic写的拍照功能,然后将ionic项目嵌入原生的时候,发现原本在ionic项目能运行的拍照功能,却没了.

为了防止混淆,使用以下名词

名词解释
ionic平台android项目表示使用ionic终端命令生成的android platform项目
混合项目表示参照上面的文档将ionic和Android原生混合的项目

1. 问题原因

在仔细对比ionic平台android项目混合项目后,发现ionic平台android项目AndroidManifest.xml里,比混合项目多了

<provider android:authorities="${applicationId}.provider" android:exported="false" android:grantUriPermissions="true" android:name="android.support.v4.content.FileProvider">
            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/provider_paths" />
        </provider>
  • ionic平台android项目AndroidManifest.xml文件
    ionic
  • 混合项目AndroidManifest.xml文件
    混合

想到在导入 res/xml/config.xml文件时,ionic平台android项目res/xml/路径下还有个provider_paths.xml文件
provider

由于本人按照教程来导入config.xml文件时以为只要这个文件,所以没有导入该provider_paths.xml文件.

2. 问题解决

(1) 将ionic平台android项目res/xml/provider_paths.xml文件导入混合项目res/xml/provider_paths.xml
(2) 在混合项目AndroidManifest.xml里添加

<provider android:authorities="${applicationId}.provider" android:exported="false" android:grantUriPermissions="true" android:name="android.support.v4.content.FileProvider">
            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/provider_paths" />
        </provider>

再次运行程序,搞定.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在 Ionic React 中调用原生指纹功能,可以使用 Capacitor 插件,该插件提供了访问设备本地功能的 API。 以下是一个示例,展示了如何使用 Capacitor 插件在 Ionic React 中调用原生指纹功能: 首先,需要安装 Capacitor 插件: ``` npm install @capacitor/core @capacitor/fingerprint ``` 然后,在 `src/index.tsx` 文件中初始化 Capacitor: ```javascript import { Capacitor } from '@capacitor/core'; if (Capacitor.isPluginAvailable('Fingerprint')) { // 插件可用 } else { // 插件不可用 } ``` 接下来,在需要调用指纹功能的组件中,使用 Capacitor 插件的 `Fingerprint` API: ```javascript import { Plugins } from '@capacitor/core'; import React, { useState } from 'react'; const { Fingerprint } = Plugins; function App() { const [message, setMessage] = useState(''); async function authenticate() { try { const result = await Fingerprint.authenticate(); if (result.success) { setMessage('Authentication successful'); } else { setMessage('Authentication failed'); } } catch (error) { console.error(error); setMessage('Authentication failed'); } } return ( <div> <button onClick={authenticate}>Authenticate</button> <p>{message}</p> </div> ); } export default App; ``` 在这个示例中,我们使用 Capacitor 的 Fingerprint API 来调用原生指纹功能。在 authenticate 方法中,我们调用 Fingerprint.authenticate 方法,并根据返回的结果更新 message 状态。 请注意,使用 Capacitor 插件需要进行一些配置,如在 `android/app/src/main/AndroidManifest.xml` 文件中添加权限声明等。具体细节可以参考 Capacitor 的官方文档。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Story51314

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值