[英]Cordova camera plugin doesn't work in react js component
我正在使用React Cord和使用Cordova相机插件的react-router构建一个PhoneGap混合应用程序。 我正在使用PhoneGap开发人员应用程序在iPhone上测试该应用程序。 问题是单击按钮后相机不显示。 任何帮助将不胜感激。 这是相机组件代码:
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;
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/
5.然后最后在ipod或idevices中运行cordova项目。它将起作用。希望它可以帮助您
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.