Ошибка компиляции говорит что кордова не доступна? - PullRequest
Новая
       10

Ошибка компиляции говорит что кордова не доступна?

0 голосов
/ 10 ноября 2018

Я создаю это приложение с PhoneGap и React. Когда я включаю cordova.js в нижний колонтитул шаблона HTML моего проекта React и использую плагин Camera внутри компонента React и запускаю сборку, чтобы я мог скопировать проект сборки в папку www Phonegap, webpack выдает ошибку, что Camera is недоступен. Конечно, плагин Camera для Cordova будет доступен позже во время выполнения, когда будет запущен сервер phonegap, как только я скопирую папку сборки в папку www Phonegap и запусту сервер Phonegap.

У меня вопрос, как включить Cordova и его плагин для камеры в React, чтобы веб-пакет нашел его, но не добавил зависимость к скомпилированному файлу JavaScript, так как библиотека cordova со всеми ее плагинами будет также доступна позже, когда Phonegap будет запущен с встроенные файлы React / 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 и копирую файлы сборки в папку www Phonegap-

enter image description here

...