Question

我正在尝试从reactjs内部触发cordova相机插件。在以前的迭代中，它利用了简单的HTML5文件输入。

在进一步研究中，我发现cordova用于android平台的当前Web视图没有提供用于摄像机控制的选项（因此是原生的cordova插件）。

我正在尝试使用以下命令从reactjs内部触发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>

React组件如下

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);

当我执行该功能时，科尔多瓦似乎没有任何反应（许可请求，打开相机等）。请注意，此组件只是更大的React项目的一部分，其他项目或多或少都在按预期方式工作。

非常感谢任何帮助。

Answer 1

我做了this sample repo来研究问题，似乎可以正确恢复图像。

这样做并阅读事件处理文档，可能的原因可能是处理程序上缺少bind（），因为这是一个类组件。

请查看回购协议，我确实会提供帮助。

Answer 2

我能够通过将我的react项目迁移到browserify来使相机功能正常工作。不是最简单的解决方案，但暂时可以解决问题。

使用Reactjs触发Cordova相机插件

2 个答案: