ClojureScript 重生开发中使用 react-native-camera

Question

有没有人用过'react-native-camera'组件和re-natal？

我只是在默认的重生骨架项目中试用 react-native-camera 组件。

我的代码如下

(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 上使用 react-native-camera 的简单工作示例将是完美的！...

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"}]])))