在ClojureScript Reagent中使用React Native MapView

Question

在ClojureScript Reagent中使用React Native MapView

react-nativeclojureandroid-mapviewclojurescriptreagent

3

我正在尝试使用https://github.com/airbnb/react-native-maps上的MapView，并使用Reagent。它可以正常工作，但是当onRegionChange事件被触发时，我该如何获取MapView的本地状态？我尝试使用current/component，但它总是nil。

(def Expo (js/require "expo"))
(def map-view (r/adapt-react-class (.-MapView Expo)))

(defn my-map []
   (r/create-class
     {:component-did-mount (fn [this] 
                       (println "component mount "))
      :reagent-render (fn []
                  (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 []
                                                  ;; Would like to see state here.
                                                  (println (.. this -state))                                                       )}]))}))

- Mamun

你为什么要求expo并调用.-MapView呢？ - user2609980

1

这里是 Expo 文档，获取更多信息请访问 https://docs.expo.io/versions/latest/sdk/map-view.html - Mamun

啊，谢谢。我今晚会看一下。 - user2609980

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2609980 · Accepted Answer

区域信息

onRegionChange 回调函数的参数是 Region。 Region 具有以下签名：

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

你可以使用 goog.object/get 从 Region 中获取值。

如果你获取了 region 并从中提取了值，那么你的 my-map 就会变成这样：

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

您可以以同样的方式获取latitudeDelta和longitudeDelta。

当您拖动地图时，纬度和经度会显示出来：

react-native-maps

组件

如果您想访问组件本身，您的代码已经可以正常工作，您只需要可视化它：

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

这句话的意思是：“这将打印出类似于：”，原文保留了HTML标记。

Print component itself

我不确定你能否对组件进行任何操作，我认为你需要Region信息。