Reactjs Cordova摄像头插件没有';不能在react js组件中工作
我正在用react js和react路由器构建一个PhoneGap混合应用程序,该应用程序使用cordova摄像头插件。我正在使用PhoneGap开发者应用程序在iPhone上测试该应用程序。问题是相机没有显示在按钮上。任何帮助都将不胜感激。以下是摄像头组件代码:Reactjs Cordova摄像头插件没有';不能在react js组件中工作,reactjs,camera,react-router,cordova-plugins,phonegap,Reactjs,Camera,React Router,Cordova Plugins,Phonegap,我正在用react js和react路由器构建一个PhoneGap混合应用程序,该应用程序使用cordova摄像头插件。我正在使用PhoneGap开发者应用程序在iPhone上测试该应用程序。问题是相机没有显示在按钮上。任何帮助都将不胜感激。以下是摄像头组件代码: import React from 'react'; import '../css/poc-form.css'; import '../css/POCButton.css'; class Camera extends React.C
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;
从“React”导入React;
导入“../css/poc form.css”;
导入“../css/POCButton.css”;
类。组件{
建造师(道具){
超级(道具);
此.state={
值:'};
this.takePicture=this.takePicture.bind(this);
}
拍照(活动){
警惕(“拍照”);
navigator.camera.getPicture(onSuccess,onFail,{
质量:50,
destinationType:Camera.destinationType.DATA\u URL,
sourceType:Camera.sourceType.Camera
});
函数onSuccess(imageData){
var image=document.getElementById('myImage');
image.src=“data:image/jpeg;base64,”+imageData;
}
函数onFail(消息){
警报('失败原因:'+消息);
}
event.preventDefault();
}
render(){
返回(
客户端ID扫描器
拍照
);
}
}
导出默认摄像机;
1.一旦您在浏览器中运行应用程序,然后在react项目中使用npm run build--p进行构建,一旦完成构建,请复制react项目中的www文件夹
2.完成以下操作
3.在xcode中创建cordova示例应用程序后,只需将此摄像头插件添加到项目中即可
cordova插件添加cordova插件摄像头
5.然后最终在ipod或idevices中运行cordova项目。它会起作用。希望它能帮助您Hi@arvind,当我使用window.cordova.plugins.camera-inside-react组件时,webpack不允许我构建,并且说摄像头不可用。我如何告诉您解决此错误,因为一旦加载cordova,摄像头插件将可用。我正在使用Phonegap,在我按照您的指示将构建文件复制到Phonegap的www文件夹后,cordova将在运行时加载。