Я пытаюсь запустить плагин Cordova Camera изнутри реагировать.В предыдущих итерациях использовался простой ввод файла HTML5.
После дальнейших исследований я обнаружил, что текущее веб-представление, которое cordova использует для платформ Android, не предоставляет возможность управления камерой (таким образом, родной плагин cordova).
Я пытаюсь вызватьПлагин камеры Cordova изнутри реагирует после сборки:
npm run build
, затем содержимое каталога сборки приложения копируется в каталог Cordovas 'www'.
Приложение Cordova является относительно ванильным, и плагин камеры добавлен с помощью команды.
cordova plugin add cordova-plugin-camera
Вот config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<plugin name="cordova-plugin-console" spec="^1.1.0" />
<plugin name="cordova-plugin-camera" spec="^4.0.3" />
<plugin name="cordova-plugin-media-capture" spec="^3.0.2" />
<engine name="android" spec="^7.1.4" />
</widget>
Реагирующий компонент выглядит следующим образом
import React, { Component } from "react";
import { Alert } from "reactstrap";
import "../../Containers/containers.css";
import { connect } from "react-redux";
import userTools from "../../Services/userTools";
class Avatar extends Component {
constructor() {
super();
this.state = {
avatar: "https://denisol.se/wp-content/uploads/2018/05/empty-avatar.jpg"
};
}
takepicture() {
if (!window.cordova) {
var Camera;
//Unless theres another way to suppress webpack
//During Build
}
navigator.camera.getPicture(
file => this.readFiles(file),
err => console.log(err),
{
quality: 50,
destinationType: Camera.DestinationType.FILE_URI
}
);
}
readFiles(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener(
"load",
() => {
console.log(reader.result);
this.setState({
avatar: reader.result
});
},
false
);
}
render() {
var avatarurl;
if (this.props.myinfo && this.props.myinfo.avatar.avatar.url) {
avatarurl = this.props.myinfo.avatar.url;
} else {
avatarurl =
"https://denisol.se/wp-content/uploads/2018/05/empty-avatar.jpg";
}
if (this.props.new) {
avatarurl = this.state.avatar;
}
return (
<div>
<img
id="avatar"
alt="test"
src={avatarurl}
onClick={() => {
if (this.props.updatable || this.props.new) {
this.takepicture();
//As for normal html input you would do the following
this.refs.fileUploader.click();
}
}}
/>
<input
type="file"
name="avatar"
ref="fileUploader"
style={{ display: "none" }}
accept="image/*;capture=camera"
capture
onChange={e => {
if (e.target.files.length && this.props.updatable) {
userTools.updateAvatar(e.target.files[0]);
} else if (e.target.files.length && this.props.new) {
this.readFiles(e.target.files[0]);
this.props.newAvatar(e.target.files[0]);
}
}}
/>
</div>
);
}
}
function mapStateToProps(state) {
return { myinfo: state.myinfoReducer };
}
export default connect(mapStateToProps)(Avatar);
когда я выполняю функцию, кажется, что нет ответа от cordova (запрос разрешений, открытие камеры, т. Д.).Обратите внимание, что этот компонент является лишь частью более крупного реактивного проекта, где все остальное работает более или менее, как ожидалось.
Любая помощь с благодарностью.