Skip to content

optimatica-meters-react-native

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

Установка

bash
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.

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

tsx
import { MeterPhotoAnalyzer } from 'optimatica-meters-react-native'

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

Props

PropТипПо умолчаниюОписание
apiKeystringAPI-ключ (JWT)
showApiKeyInputbooleanautoПоле ввода ключа
showRawJsonbooleanfalseПоказать сырой JSON-ответ
disabledbooleanfalseОтключить UI
theme'light' | 'dark' | 'auto''auto'Цветовая тема. auto следует системной теме устройства

Callbacks

CallbackPayload
onAnalyzeStartReactNativeImageAsset (по разу на каждое отправленное фото)
onSuccess{ success: true, meter } (по разу на каждый распознанный счётчик)
onErrorstring
onComplete(response, error)response есть только при единственном фото
onResultsAnalyzeMeterResponse[] — массив результатов по всем фото

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

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

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

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

Hook

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

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

analyzeMany([asset1, asset2]) отправляет несколько фото за один запрос; responses — массив результатов по всем фото.

Стили

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

MIT License