optimatica-meters-react-native

React Native компонент MeterPhotoAnalyzer для iOS и Android — съёмка, выбор из галереи и распознавание счётчика. Поддерживает несколько фото за один раз (до 10): мультивыбор из галереи (selectionLimit: 0) и дозапись снимков с камеры.

Установка

npm install optimatica-meters-react-native optimatica-meters react-native-image-picker

Peer dependencies:

• react >= 18
• react-native >= 0.72
• react-native-image-picker >= 7

Настройте нативные permissions для камеры и галереи согласно документации image-picker.

Использование

import { MeterPhotoAnalyzer, configureZhkhSdk } from 'optimatica-meters-react-native'

configureZhkhSdk({ apiKey: 'eyJhbGci...' })

export function MeterScreen() {
  return (
    <MeterPhotoAnalyzer
      apiKey="eyJhbGci..."
      onSuccess={(result) => {
        console.log(result.meter.serialNumber)
      }}
    />
  )
}

Props

| Prop | Тип | По умолчанию | Описание | |------|-----|--------------|----------| | apiKey | string | — | API-ключ (JWT) | | showApiKeyInput | boolean | auto | Поле ввода ключа | | showRawJson | boolean | false | Показать сырой JSON-ответ | | disabled | boolean | false | Отключить UI |

Callbacks

| Callback | Payload | |----------|---------| | onAnalyzeStart | ReactNativeImageAsset (по разу на каждое фото) | | onSuccess | { success: true, meter } (по разу на каждый распознанный счётчик) | | onError | string | | onComplete | (response, error) — response только при одном фото | | onResults | AnalyzeMeterResponse[] — массив результатов по всем фото |

Камера и галерея

Компонент использует:

• launchCamera() — съёмка
• launchImageLibrary() — выбор из галереи

Изображение отправляется через FormData с { uri, name, type } — см. optimatica-meters.

Hook

import { useMeterAnalyze } from 'optimatica-meters-react-native'

const { isLoading, response, responses, error, analyze, analyzeMany, reset } =
  useMeterAnalyze()

await analyze(asset)               // одно фото
await analyzeMany([a1, a2])        // несколько фото

Стили

Встроенный StyleSheet — отдельный CSS не требуется.

Документация

Полная документация: apps/docs.