@ray-js/robot-map-component v0.0.12

English | 简体中文

@ray-js/robot-map-component

Robot Map Component

Installation

$ npm install @ray-js/robot-map-component
# or
$ yarn add @ray-js/robot-map-component

Usage

Tuya MiniApp Tools >= 0.5.10 Basic Lib >= 2.15.0 Tuya App Basic Line > 5.8.0

Create copy-scripts.js in the project root directory

const shell = require('shelljs');

shell.cp('-R', 'node_modules/@ray-js/robot-map-component/lib/webview', 'src');

Add postinstall in package.json in the project

  "scripts": {
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
    "test": "echo \"Error: no test specified\" && exit 1",
    "start:tuya": "ray start -t tuya --bundler=webpack",
    "build:tuya": "ray build -t tuya --bundler=webpack",
    "postinstall": "node copy-scripts.js"
  },

Re-install dependencies

yarn add @ray-js/robot-map-component

FullScreen component used in the project

import React from 'react';
import { View } from '@ray-js/ray';
import { IndoorMap } from '@ray-js/robot-map-component';
import styles from './index.module.less';

export default function Home() {
  return (
    <View className={styles.view}>
      <IndoorMap.Full />
    </View>
  );
}

Dynamic width and height component used in the project

import React from 'react';
import { View } from '@ray-js/ray';
import { IndoorMap } from '@ray-js/robot-map-component';
import styles from './index.module.less';

export default function Home() {
  return (
    <View className={styles.view}>
      <IndoorMap.Dynamic />
    </View>
  );
}

Call the API of the map component in the project

import React, { useCallback, useRef } from 'react';
import { View } from '@ray-js/ray';
import { IndoorMap, IndoorMapUtils, IndoorMapApi } from '@ray-js/robot-map-component';
import styles from './index.module.less';

export default function Home() {
  const mapId = useRef('');
  const onMapId = useCallback((data: { mapId: string; dataMapId: string; target: number }) => {
    mapId.current = data.mapId;
    IndoorMapApi.getAllMapAreaInfo(IndoorMapUtils.getMapInstance(mapId.current), false).then(
      res => {
        console.log('getAllMapAreaInfo ==>', res);
      }
    );
  }, []);

  const onLoggerInfo = useCallback((data: { info: string; theme: string; args: any }) => {
    console.log(data.info || '', data.theme || '', ...Object.values(data.args || {}));
  }, []);

  return (
    <View className={styles.view}>
      <IndoorMap.Dynamic eventProps={{ onMapId, onLoggerInfo }} />
    </View>
  );
}