Как импортировать реактивные карты в проект Clojruescript Expo - PullRequest
Новая
       23

Как импортировать реактивные карты в проект Clojruescript Expo

0 голосов
/ 24 марта 2020

Я пытаюсь создать простое приложение Map, используя 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"
  }
}

Я пытался следовать приведенному здесь ответу: Использование React Native MapView в реагенте ClojureScript , но это не так Кажется, что это работает.

Вся помощь оценена!

1 Ответ

0 голосов
/ 25 марта 2020

Если вы утешаете log.log объекта response-native-maps, вы можете видеть, что MapView назначен default . 

(.log js/console ReactNativeMaps)

enter image description here

Итак, вам нужна библиотека, подобная этой: 

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

Это мой рабочий тест (файл core.cl js): 

(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)))
...