使用injectScript

.eslintrc

+
+{
+  "extends": ["fbjs-opensource"]
+}
\ No newline at end of file

.npmignore

+examples/
+node_modules/
+src/
+.babelrc
+bundle-html.js
\ No newline at end of file

npm-debug.log

-0 info it worked if it ends with ok
-1 verbose cli [ '/usr/local/bin/node',
-1 verbose cli   '/usr/local/lib/node_modules/cnpm/node_modules/.bin/npm',
-1 verbose cli   '--userconfig=/Users/wangduo/.cnpmrc',
-1 verbose cli   '--disturl=https://npm.taobao.org/mirrors/node',
-1 verbose cli   '--registry=http://registry.cnpmjs.org/',
-1 verbose cli   'publish' ]
-2 info using npm@3.9.5
-3 info using node@v8.15.0
-4 verbose publish [ '.' ]
-5 silly cache add args [ '.', null ]
-6 verbose cache add spec .
-7 silly cache add parsed spec Result {
-7 silly cache add   raw: '.',
-7 silly cache add   scope: null,
-7 silly cache add   name: null,
-7 silly cache add   rawSpec: '.',
-7 silly cache add   spec: '/Users/wangduo/workspace/packages/react-native-canvas',
-7 silly cache add   type: 'directory' }
-8 verbose addLocalDirectory /Users/wangduo/.npm/@hisense/react-native-canvas/0.1.27/package.tgz not in flight; packing
-9 verbose correctMkdir /Users/wangduo/.npm correctMkdir not in flight; initializing
-10 info lifecycle @hisense/react-native-canvas@0.1.27~prepublish: @hisense/react-native-canvas@0.1.27
-11 silly lifecycle @hisense/react-native-canvas@0.1.27~prepublish: no script for prepublish, continuing
-12 verbose tar pack [ '/Users/wangduo/.npm/@hisense/react-native-canvas/0.1.27/package.tgz',
-12 verbose tar pack   '/Users/wangduo/workspace/packages/react-native-canvas' ]
-13 verbose tarball /Users/wangduo/.npm/@hisense/react-native-canvas/0.1.27/package.tgz
-14 verbose folder /Users/wangduo/workspace/packages/react-native-canvas
-15 verbose addLocalTarball adding from inside cache /Users/wangduo/.npm/@hisense/react-native-canvas/0.1.27/package.tgz
-16 verbose correctMkdir /Users/wangduo/.npm correctMkdir not in flight; initializing
-17 silly cache afterAdd @hisense/react-native-canvas@0.1.27
-18 verbose afterAdd /Users/wangduo/.npm/@hisense/react-native-canvas/0.1.27/package/package.json not in flight; writing
-19 verbose correctMkdir /Users/wangduo/.npm correctMkdir not in flight; initializing
-20 verbose afterAdd /Users/wangduo/.npm/@hisense/react-native-canvas/0.1.27/package/package.json written
-21 silly publish { name: '@hisense/react-native-canvas',
-21 silly publish   license: 'MIT',
-21 silly publish   version: '0.1.27',
-21 silly publish   main: 'dist/Canvas.js',
-21 silly publish   scripts:
-21 silly publish    { build: 'babel src --out-dir dist --copy-files --compact false && node bundle-html.js ./dist/index.html',
-21 silly publish      'copy-to-example': 'rsync -rv dist example/node_modules/react-native-canvas',
-21 silly publish      'build-to-example': 'npm run build; npm run copy-to-example;',
-21 silly publish      prepare: 'npm run build' },
-21 silly publish   devDependencies:
-21 silly publish    { '@babel/cli': '7.0.0-beta.47',
-21 silly publish      '@babel/core': '7.0.0-beta.47',
-21 silly publish      '@babel/plugin-proposal-class-properties': '^7.3.3',
-21 silly publish      '@babel/plugin-proposal-decorators': '7.0.0-beta.47',
-21 silly publish      '@babel/preset-env': '^7.3.1',
-21 silly publish      '@babel/preset-react': '^7.0.0',
-21 silly publish      'babel-preset-react-native': '^5.0.2',
-21 silly publish      eslint: '^3',
-21 silly publish      'eslint-config-fbjs-opensource': '^1.0.0',
-21 silly publish      parse5: '^5.0.0',
-21 silly publish      prettier: '^1.14.2' },
-21 silly publish   dependencies: { 'ctx-polyfill': '^1.1.4', 'react-native-webview': '^5.2.0' },
-21 silly publish   repository:
-21 silly publish    { type: 'git',
-21 silly publish      url: 'http://gitlab.shop.hisense.com/wangduo3/react-native-canvas' },
-21 silly publish   description: '<div align="center"> <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/96/fireworks_1f386.png"/> <h1>react-native-canvas</h1> </div>',
-21 silly publish   directories: { example: 'example' },
-21 silly publish   author: '',
-21 silly publish   readme: '<div align="center">\n<img src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/96/fireworks_1f386.png"/>\n<h1>react-native-canvas</h1>\n</div>\n\nA Canvas component for React Native\n\n```bash\nnpm install react-native-canvas\n```\n\n### Usage\n\n```JSX\nimport React, { Component } from \'react\';\nimport Canvas from \'react-native-canvas\';\n\nclass App extends Component {\n\n  handleCanvas = (canvas) => {\n    const ctx = canvas.getContext(\'2d\');\n    ctx.fillStyle = \'purple\';\n    ctx.fillRect(0, 0, 100, 100);\n  }\n\n  render() {\n    return (\n      <Canvas ref={this.handleCanvas}/>\n    )\n  }\n}\n```\n\n### API\n\n#### Canvas\n\n###### Canvas#height\n\nReflects the height of the canvas in pixels\n\n###### Canvas#width\n\nReflects the width of the canvas in pixels\n\n###### Canvas#getContext()\n\nReturns a canvas rendering context. Currently only supports 2d context.\n\n###### Canvas#toDataURL()\n\nReturns a `Promise` that resolves to DataURL.\n\n#### CanvasRenderingContext2D\n\nStandard CanvasRenderingContext2D. [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D). Only difference is `await` should be used to retrieve values from methods.\n\n```javascript\nconst ctx = canvas.getContext(\'2d\');\n```\n\n#### Image\n\nWebView Image constructor. Unlike in the browsers accepts canvas as first argument. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)\n\n```javascript\nconst image = new Image(canvas, height, width);\n```\n',
-21 silly publish   readmeFilename: 'readme.md',
-21 silly publish   gitHead: '3db472a480d78c871f11f86d89da03be55660ab8',
-21 silly publish   _id: '@hisense/react-native-canvas@0.1.27',
-21 silly publish   _shasum: 'ca46466aa312f46145e3df7283b3efa823effc19',
-21 silly publish   _from: '.' }
-22 verbose getPublishConfig undefined
-23 silly mapToRegistry name @hisense/react-native-canvas
-24 silly mapToRegistry scope (from package name) @hisense
-25 silly mapToRegistry registry http://registry.shop.hisense.com/
-26 silly mapToRegistry data Result {
-26 silly mapToRegistry   raw: '@hisense/react-native-canvas',
-26 silly mapToRegistry   scope: '@hisense',
-26 silly mapToRegistry   name: '@hisense/react-native-canvas',
-26 silly mapToRegistry   rawSpec: '',
-26 silly mapToRegistry   spec: 'latest',
-26 silly mapToRegistry   type: 'tag' }
-27 silly mapToRegistry uri http://registry.shop.hisense.com/@hisense%2freact-native-canvas
-28 verbose publish registryBase http://registry.shop.hisense.com/
-29 silly publish uploading /Users/wangduo/.npm/@hisense/react-native-canvas/0.1.27/package.tgz
-30 verbose request uri http://registry.shop.hisense.com/@hisense%2freact-native-canvas
-31 verbose request always-auth set; sending authorization
-32 info attempt registry request try #1 at 18:06:19
-33 verbose request id 1e0f9a0bd2e99270
-34 http request PUT http://registry.shop.hisense.com/@hisense%2freact-native-canvas
-35 http 400 http://registry.shop.hisense.com/@hisense%2freact-native-canvas
-36 verbose headers { server: 'nginx',
-36 verbose headers   date: 'Thu, 21 Feb 2019 10:06:19 GMT',
-36 verbose headers   'content-type': 'application/json; charset=utf-8',
-36 verbose headers   'content-length': '104',
-36 verbose headers   connection: 'keep-alive',
-36 verbose headers   'x-current-requests': '1',
-36 verbose headers   vary: 'Origin',
-36 verbose headers   'x-readtime': '5' }
-37 verbose request invalidating /Users/wangduo/.npm/registry.shop.hisense.com/_40hisense_252freact-native-canvas on PUT
-38 error publish Failed PUT 400
-39 verbose stack Error: invalid scope scope @hisense not match legal scopes: @cnpm, @cnpmtest, @cnpm-test: @hisense/react-native-canvas
-39 verbose stack     at makeError (/usr/local/lib/node_modules/cnpm/node_modules/npm/node_modules/npm-registry-client/lib/request.js:264:12)
-39 verbose stack     at CachingRegistryClient.<anonymous> (/usr/local/lib/node_modules/cnpm/node_modules/npm/node_modules/npm-registry-client/lib/request.js:252:14)
-39 verbose stack     at Request._callback (/usr/local/lib/node_modules/cnpm/node_modules/npm/node_modules/npm-registry-client/lib/request.js:172:14)
-39 verbose stack     at Request.self.callback (/usr/local/lib/node_modules/cnpm/node_modules/npm/node_modules/request/request.js:200:22)
-39 verbose stack     at emitTwo (events.js:126:13)
-39 verbose stack     at Request.emit (events.js:214:7)
-39 verbose stack     at Request.<anonymous> (/usr/local/lib/node_modules/cnpm/node_modules/npm/node_modules/request/request.js:1067:10)
-39 verbose stack     at emitOne (events.js:121:20)
-39 verbose stack     at Request.emit (events.js:211:7)
-39 verbose stack     at IncomingMessage.<anonymous> (/usr/local/lib/node_modules/cnpm/node_modules/npm/node_modules/request/request.js:988:12)
-40 verbose statusCode 400
-41 verbose pkgid @hisense/react-native-canvas
-42 verbose cwd /Users/wangduo/workspace/packages/react-native-canvas
-43 error Darwin 18.2.0
-44 error argv "/usr/local/bin/node" "/usr/local/lib/node_modules/cnpm/node_modules/.bin/npm" "--userconfig=/Users/wangduo/.cnpmrc" "--disturl=https://npm.taobao.org/mirrors/node" "--registry=http://registry.cnpmjs.org/" "publish"
-45 error node v8.15.0
-46 error npm  v3.9.5
-47 error code E400
-48 error invalid scope scope @hisense not match legal scopes: @cnpm, @cnpmtest, @cnpm-test: @hisense/react-native-canvas
-49 error If you need help, you may report this error at:
-49 error     <https://github.com/npm/npm/issues>
-50 verbose exit [ 1, true ]

package.json

 {
   "name": "@hisense/react-native-canvas",
   "license": "MIT",
-  "version": "0.1.27",
+  "version": "0.1.32",
   "main": "dist/Canvas.js",
   "scripts": {
     "build": "babel src --out-dir dist --copy-files --compact false && node bundle-html.js ./dist/index.html",
     "copy-to-example": "rsync -rv dist example/node_modules/react-native-canvas",
     "build-to-example": "npm run build; npm run copy-to-example;",
+    "prepublish": "npm run build",
     "prepare": "npm run build"
   },
   "devDependencies": {

src/Canvas.js

@@ -13,7 +13,7 @@ import './CanvasGradient';
 
 @webviewTarget('canvas')
 @webviewProperties({width: 300, height: 150})
-@webviewMethods(['toDataURL'])
+@webviewMethods(['toDataURL', 'drawMultiText'])
 export default class Canvas extends Component {
   static propTypes = {
     style: PropTypes.shape(ViewStylePropTypes),

src/webview.js

@@ -23,7 +23,33 @@ class AutoScaledCanvas {
   constructor(element) {
     this.element = element;
   }
+  drawMultiText = (text = '', x, y, fontSize = 22, lineHeight = 24, color = fontColor, width = 100, rowNum = 2) => {
+    const ctx = this.element.getContext('2d');
+    ctx.font = `${fontSize}px Arial`;
+    ctx.fillStyle = color;
+    ctx.textAlign = 'left';
+    const chr = text.split('')
+    let temp = ''
+    const row = []
 
+    for (let a = 0; a < chr.length; a++) {
+      if (ctx.measureText(temp).width > width) {
+        if (row.length === rowNum - 1) {
+          temp = `${temp.slice(0, temp.length - 1)}...`
+        }
+        row.push(temp)
+        temp = ''
+        if (row.length === rowNum) {
+          break
+        }
+      }
+      temp += chr[a]
+    }
+    row.length < rowNum && row.push(temp)
+    for (let b = 0; b < row.length; b++) {
+      ctx.fillText(row[b], x, y + ((b + 1) * lineHeight))
+    }
+  }
   toDataURL(...args) {
     return this.element.toDataURL(...args);
   }
@@ -146,7 +172,7 @@ const createObjectsFromArgs = args => {
 //     type: 'log',
 //     payload: args,
 //   });
-//   postMessage(a);
+//   window.ReactNativeWebView.postMessage(a);
 // };
 
 const canvas = document.createElement('canvas');
@@ -224,7 +250,7 @@ function handleMessage({id, type, payload}) {
           }
         }
       }
-      postMessage(JSON.stringify({id, ...message}));
+      window.ReactNativeWebView.postMessage(JSON.stringify({id, ...message}));
       break;
     }
     case 'set': {
@@ -239,7 +265,7 @@ function handleMessage({id, type, payload}) {
       object.__constructorName__ = constructor;
       const message = toMessage({});
       targets[target] = object;
-      postMessage(JSON.stringify({id, ...message}));
+      window.ReactNativeWebView.postMessage(JSON.stringify({id, ...message}));
       break;
     }
     case 'listen': {
@@ -253,7 +279,7 @@ function handleMessage({id, type, payload}) {
               target: {...flattenObject(targets[target]), [WEBVIEW_TARGET]: target},
             },
           });
-          postMessage(JSON.stringify({id, ...message}));
+          window.ReactNativeWebView.postMessage(JSON.stringify({id, ...message}));
         });
       }
       break;
@@ -262,7 +288,7 @@ function handleMessage({id, type, payload}) {
 }
 
 const handleError = (err, message) => {
-  postMessage(
+  window.ReactNativeWebView.postMessage(
     JSON.stringify({
       id: message.id,
       type: 'error',
@@ -292,5 +318,6 @@ function handleIncomingMessage(e) {
     }
   }
 }
+window.handleIncomingMessage = handleIncomingMessage;
 
 // document.addEventListener('message', handleIncomingMessage);