且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在ClojureScript代理中使用React Native MapView

更新时间:2023-12-03 18:24:40

Region information

The onRegionChange callback has Region as argument. Region has the following signature:

type Region {
  latitude: Number,
  longitude: Number,
  latitudeDelta: Number,
  longitudeDelta: Number,
}

You can get the values from the Region by using goog.object/get.

If you get the region and extract the values from it your my-map looks like:

(defn my-map []
  [map-view {:style         {:flex 1}
             :initialRegion {:latitude       52.3702
                             :longitude      4.89516
                             :latitudeDelta  0.0922
                             :longitudeDelta 0.0421}
             :onRegionChange (fn [region]
                               (alert (str "Latitude: "
                                           (goog.object/get region "latitude")
                                           "\nLongitude: "
                                           (goog.object/get region "longitude"))))}])

You can obtain the latitudeDelta and longitudeDelta in the same manner.

When you drag the map the latitude and longitude show up:

The component

If you want access to the component itself your code works fine, you just have to visualize it:

(defn jsx->clj
  [x]
  (into {} (for [k (.keys js/Object x)] [k (aget x k)])))

(defn my-map []
  (let [this (r/current-component)]
    [map-view {:style          {:flex 1}
               :initialRegion  {:latitude       37.78825
                                :longitude      -122.4324
                                :latitudeDelta  0.0922
                                :longitudeDelta 0.0421}
               :onRegionChange (fn [region]
                                 ;; Would like to see state here.

                                 (alert "The component..."
                                        (str (jsx->clj this))))}]))

This prints something like:

Not sure if you can do anything with the component, I think you need the Region information.