如何将 react-native-maps 导入 Clojruescript Expo 项目

Question

我正在尝试使用 Expo 和 Clojurescript 创建一个简单的地图应用程序，但是当我尝试渲染地图时出现以下错误：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

这就是代码的样子：

(ns map-test.core
  (:require [reagent.core :as r :refer [atom]]
            [re-frame.core :refer [subscribe dispatch dispatch-sync]]
            [oops.core :refer [ocall]]
            [map-test.handlers]
            [map-test.subs]))

(def ReactNative (js/require "react-native"))
(def expo (js/require "expo"))
(def view (r/adapt-react-class (.-View ReactNative)))
(def text (r/adapt-react-class (.-Text ReactNative)))
(def MapView (js/require "react-native-maps"))
(def map-view (r/adapt-react-class MapView))

(defn app-root []
  [view {:style {:flex 1}}
   [map-view]])

(defn init []
  (dispatch-sync [:initialize-db])
  (ocall expo "registerRootComponent" (r/reactify-component app-root)))

这是我的package.json：

{
  "name": "map-test",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "main": "main.js",
  "dependencies": {
    "expo": "^34.0.3",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "create-react-class": "15.6.3",
    "react-native-maps": "~0.24.0"
  }
}

我尝试按照此处显示的答案进行操作：Using React Native MapView in ClojureScript Reagent，但它似乎不起作用。

感谢所有帮助！

Answer 1

如果你控制台记录 react-native-maps 对象，你可以看到 MapView 是 分配给默认。

(.log js/console ReactNativeMaps)

所以你必须要求这样的库：

(def ReactNativeMaps (js/require "react-native-maps"))
(def map-view (r/adapt-react-class (.-default ReactNativeMaps)))

这是我的工作测试（core.cljs 文件）：

(ns map-test.core
    (:require [reagent.core :as r :refer [atom]]
              [re-frame.core :refer [subscribe dispatch dispatch-sync]]
              [oops.core :refer [ocall]]
              [myapp.handlers]
              [myapp.subs]))

(def ReactNative (js/require "react-native"))
(def expo (js/require "expo"))

(def text (r/adapt-react-class (.-Text ReactNative)))
(def view (r/adapt-react-class (.-View ReactNative)))

(def ReactNativeMaps (js/require "react-native-maps"))
(def map-view (r/adapt-react-class (.-default ReactNativeMaps)))

(def styles {:container
             {:flex 1
              :alignItems "center"
              :justifyContent "center"}
             :mapStyle
             {:width 300
              :height 400}})

(defn app-root []
  [view (:container styles)
    [map-view (:mapStyle styles)]])

(defn init []
  (dispatch-sync [:initialize-db])
  (ocall expo "registerRootComponent" (r/reactify-component app-root)))