Cordova 相机插件在反应 js 组件中不起作用

Question

我正在使用 react js 和 react-router 构建一个 PhoneGap 混合应用程序，该应用程序使用 cordova 相机插件。我正在使用 PhoneGap 开发者应用程序在 iPhone 上测试该应用程序。问题是相机没有在按钮点击时显示。任何帮助将不胜感激。下面是Camera组件代码：

import React from 'react';
import '../css/poc-form.css';
import '../css/POCButton.css';

class Camera extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        value: '' };

      this.takePicture = this.takePicture.bind(this);
    }

takePicture(event) {
      alert('take a picture');
      navigator.camera.getPicture(onSuccess, onFail, {  
        quality: 50, 
        destinationType: Camera.DestinationType.DATA_URL, 
        sourceType: Camera.SourceType.CAMERA
     });  

     function onSuccess(imageData) { 
        var image = document.getElementById('myImage'); 
        image.src = "data:image/jpeg;base64," + imageData; 
     }  

     function onFail(message) { 
        alert('Failed because: ' + message); 
     } 
    event.preventDefault();
}


 render() {
      return (
        <div>
          <link rel="stylesheet" type="text/css" href="poc.css"/>
        <h1>Client ID Scanner</h1>
            <button id = "takePicture" className = "POCButton" onClick={this.takePicture} >Take Picture</button>
            <img id = "myImage" ></img>
        </div>
      );
    }
  }
  export default Camera;

Answer 1

1.一旦您在浏览器中运行应用程序，然后在 react 项目中使用 npm run build -- -p 进行构建，一旦构建完成，请复制您的 react 项目中的 www 文件夹

2.完成以下操作 https://cordova.apache.org/docs/en/latest/guide/cli/

3.一旦您在 xcode 中创建了 cordova 示例应用程序，只需将此相机插件添加到项目中 cordova 插件添加 cordova-plugin-camera https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/

4. 然后在您的科尔多瓦应用程序的暂存文件夹中，请将以下 WWW 文件夹粘贴到科尔多瓦项目中

5.然后最后在 ipod 或 idevices 中运行 cordova 项目。它会工作。希望它可以帮助你