android - 编译错误说科尔多瓦不可用？

问题描述

我正在使用 Phonegap 和 React 构建这个应用程序。当我在我的 React 项目的 HTML 模板页脚中包含 cordova.js 并在 React 组件中使用 Camera 插件并运行构建以便我可以将构建项目复制到 Phonegap 的 www 文件夹时，webpack 出现一个错误，即 Camera is无法使用。当然，一旦我将构建文件夹复制到 Phonegap 的 www 文件夹并运行 Phonegap 服务器，当 phonegap 服务器将运行时，Cordova 的相机插件将在稍后运行时可用。

我的问题是如何将 Cordova 及其相机插件包含到 React 中，以便 webpack 找到它，但不会将依赖项添加到已编译的 JavaScript 文件中，因为稍后当 Phonegap 与构建文件一起运行时，cordova 库及其所有插件也将可用反应/webpack。

这是我的代码和文件夹结构-

HTML-

<body>

    <div id="root"></div>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/plugins.js"></script>
    <script type="text/javascript" src="scripts/custom.js"></script>

</body>

反应组件-

    import React, { Component } from 'react';
    import axios from 'axios';

    import { bindActionCreators } from 'redux';
    import { connect } from 'react-redux';
    import * as allActions from '../../actions/basket';
    import restaurant_image from '../../assets/images/pictures/2t.jpg';

    class Basket extends Component {

      constructor(props) {
          super(props);
          this.deviceReady = this.deviceReady.bind(this);
          this.state = {
            restaurants_info: [],
            showInput: false,
            posts_awaiting: 0,
            button_disabled: true
          }
      }


      deviceReady () {
        window.cordova.plugins.Camera.getPicture(this.onSuccess, this.onFail, { quality: 70, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true });
      }

      onSuccess(imageURI) {
        var image = document.getElementById('urlImage');
        image.src = imageURI;

        image.style.display = 'block';

        console.log(imageURI);
      }

      onFail(message) {
        console.log(message);
      }

      componentDidMount() {
        document.addEventListener('deviceready', this.deviceReady);
      }
      render() {

      const imgStyle = {
        maxWidth: "100%"
      }

        return (
                <button onClick={this.deviceReady} className="button button-round button-xs uppercase ultrabold button-xs button-center button-orange">TakePic</button>
                <img alt="bello" id="urlImage"/>
                </div>
            </div>
        );
      }

    }

    function mapStateToProps(state, prop) {
      return {
        posts_added: state.posts_added,
        posts_basketed: state.posts_basketed,
        awaiting_added: state.awaiting_added
      }
    }

    function mapDispatchToProp(dispatch) {
      return {
        action: bindActionCreators(allActions, dispatch)
      }
    }

    export default connect(mapStateToProps, mapDispatchToProp)(Basket);

这是应用程序结构-我在 React 上运行构建命令并将构建文件复制到 Phonegap 的 www 文件夹-

标签： androidreactjscordovacameraphonegap

android - 编译错误说科尔多瓦不可用？

问题描述

解决方案

推荐阅读