Cordova+Dva+antd-mobile实现react移动

作者: 俩小两 | 来源:发表于2018-11-14 14:31 被阅读0次

Cordova+Dva+antd-mobile实现react移动
基于react实现的移动端的可吸附悬浮按钮，支持拖动拖拽功能
React 、React.js、React Native三者关系
React、React.js、React Native的区别
react-rnd 实现拖拽移动。放大缩小功能
React Native开发资料收集
React、React.js、React Native
我的收藏
如何在 React Native 项目中使用 MQTT
Flutter入门-02-Dart语言简讲

新建App

官方文档http://cordova.axuer.com/docs/zh-cn/latest/guide/cli/index.html

安装Cordova CLI

$ npm install -g cordova

创建应用

$ cordova create cordovaApp com.my.demo demo

cordovaApp，com.my.demo，demo依次代表文件夹名，默认反向域值，app应用名

添加平台

$ cd cordovaApp
$ cordova platform add android

使用dva

创建react项目

$ dva new src

安装antd-moblie

$ yarn add antd-mobile

配项目输出路径

src/package.json文件build后面添加&& ((robocopy .\dist ..\www /MIR) & exit 0)

"build": "roadhog build && ((robocopy .\\dist ..\\www /MIR) & exit 0)"

真机调试

/src项目根目录下

$ npm run build

cordova根目录下

$ cordova run android

PS：真机调试时，手机需在设置中打开开发者模式，如果找不到开发者模式，可以在关于手机中连续点击版本号

使用cordova插件

以相机插件为例，官方文档地址点击查看

修改index.js，添加deviceready事件监听

// src/src/index.js
import dva from 'dva';
import './index.css';

document.addEventListener('deviceready', function () {
  // 1. Initialize
  const app = dva();

  // 2. Plugins
  // app.use({});

  // 3. Model
  // app.model(require('./models/example').default);

  // 4. Router
  app.router(require('./router').default);

  // 5. Start
  app.start('#root');

}, false);

// src/src/components/Camera.js
function Camera() {
  // 打开图片库
  navigator.camera.getPicture(onSuccess, onFail, {});

  function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = imageData;
 }

  function onFail(message) {
    alert('Failed because: ' + message);
  }
}

export default Camera;

在IndexPage.js中调用

import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';
import Camera from '../components/Camera'

function IndexPage() {
  return (
    <div className={styles.normal}>
      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
      <div className={styles.block}>
        <button onClick={Camera}>点击拍照</button>
      </div>
      <div className={styles.block}>
        <img id="myImage" className={styles.welcome} alt="img" />
      </div>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

打包dva

$ cnpm run build

修改www/index.html，添加cordova.js

// www/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dva Demo</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>

  <div id="root"></div>
  <script src="index.js"></script>
  <script type="text/javascript" src="cordova.js"></script>

</body>
</html>