Использование response-native-camera в ретентальной разработке ClojureScript

Question

Кто-нибудь использовал компонент "реагировать на камеру" с помощью ренатала?

Я просто испытываю компонент реагировать на встроенную камеру в проекте по умолчанию для скелета.

Мой код следующий

(ns wmshandheld.android.core
  (:require [reagent.core :as r :refer [atom]]
            [re-frame.core :refer [subscribe dispatch dispatch-sync]]
            [wmshandheld.events]
            [wmshandheld.subs]))

(def ReactNative (js/require "react-native"))
(def ReactNativeCamera (js/require "react-native-camera"))

(def app-registry (.-AppRegistry ReactNative))
(def camera (.-Camera ReactNativeCamera))
(def text (r/adapt-react-class (.-Text ReactNative)))
(def view (r/adapt-react-class (.-View ReactNative)))
(def touchable-highlight (r/adapt-react-class (.-TouchableHighlight ReactNative)))

(defn alert [title]
  (.alert (.-Alert ReactNative) title))

(defn app-root []
  (fn []
    [view {:style {:flex-direction "column" :margin 40 :align-items "center"}}
     [camera {:ref    (fn [cam]
                        (this-as this
                          (set! (.-camera this) cam)))
              :style  {:flex 1 :justify-content "flex-end" :align-items "center"}
              :aspect (.-fill (.-Aspect (.-constants camera)))}
      [text {:style {:flex          0 :background-color "#fff"
                     :border-radius 5 :color "#000"
                     :padding       10 :margin 40}
             :on-press #(alert "HELLO!")}
       "[CAPTURE]"]]]))

(defn init []
      (dispatch-sync [:initialize-db])
      (.registerComponent app-registry "WMSHandheld" #(r/reactify-component app-root)))

Но я получил такую ​​ошибку.

console.error: "Error rendering component (in wmshandheld.android.core.app_root)"
error
    YellowBox.js:71:16
finishClassComponent
    ReactNativeFiber-dev.js:1667:86
updateClassComponent
    ReactNativeFiber-dev.js:1659:33
beginWork
    ReactNativeFiber-dev.js:1786:44
performUnitOfWork
    ReactNativeFiber-dev.js:2528:33
workLoop
    ReactNativeFiber-dev.js:2554:141
_invokeGuardedCallback
    ReactNativeFiber-dev.js:73:23
invokeGuardedCallback
    ReactNativeFiber-dev.js:47:40
performWork
    ReactNativeFiber-dev.js:2593:41
scheduleUpdateImpl
    ReactNativeFiber-dev.js:2728:101
scheduleUpdate
    ReactNativeFiber-dev.js:2711:38
enqueueSetState
    ReactNativeFiber-dev.js:1514:90
setState
    react.development.js:218:31
<unknown>
    figwheel-bridge.js:88:33
waitForFinalEval
    figwheel-bridge.js:197:21
<unknown>
    figwheel-bridge.js:28:17
fireEvalListenters
    figwheel-bridge.js:27:41
<unknown>
    figwheel-bridge.js:118:24
tryCallOne
    core.js:37:14
<unknown>
    core.js:123:25
<unknown>
    JSTimers.js:301:23
_callTimer
    JSTimers.js:154:6
_callImmediatesPass
    JSTimers.js:202:17
callImmediates
    JSTimers.js:470:11
__callImmediates
    MessageQueue.js:278:4
<unknown>
    MessageQueue.js:145:6
__guard
    MessageQueue.js:265:6
flushedQueue
    MessageQueue.js:144:17
callFunctionReturnFlushedQueue
    MessageQueue.js:119:11

Кто-нибудь знает в чем проблема? и как это решить? просто голый рабочий пример, который использует ответную нативную камеру на github или gist, был бы идеальным!...

Answer 1

Если это поможет, вот как можно заставить камеру отображаться в эмуляторе. Я не вставил весь код, но с помощью [view [camera-component]] в корне приложения эмулятор показывает компонент задней камеры. Надеюсь это поможет

(def ReactNativeCamera (js/require "react-native-camera"))
(def camera (r/adapt-react-class (.-RNCamera ReactNativeCamera)))


(defn camera-component
  []
  (let data {}]
   (fn []
      [view
       [text "hello"]

       [camera {
                :ref (fn [cam] (this-as this (set! (.-Camera this) cam)))
                :style {:flex 1 :justify-content "flex-end" :align-items "center" :border-color "black" :border-width 1 :min-height "10%"}
                :type (-> ReactNativeCamera .-RNCamera .-Constants .-Type .-back)
                :permission-dialog-title "Permission to use camera"
                :permission-dialog-message "Need permission to use camera on your phone"}]])))