代码之家  ›  专栏  ›  技术社区  ›  Tessy Thomas

Clojure上的React native-通过id获取ScrollView并滚动到ScrollView中的一个视图

  •  2
  • Tessy Thomas  · 技术社区  · 6 年前

    我有一张带有标记列表的地图。在地图下方的滚动视图中,我还有一个视图列表(包含标记项的详细信息)。

    当我点击地图中的一个标记时,我需要向下滚动到ScrollView中的一个特定视图。

    (defn render-link [ctx art]
      (let [{:keys [dimensions]} (get-dimensions)
            route (current-route> ctx)
            name (:name art)
            photos ((:photos art))
            campus ((:campus art))
            thumbnail ((:thumbnail art))
            art-selector (if thumbnail thumbnail (first photos))
            photo-url (str "https:" (image-url (when (seq photos) (get-in art-selector [:file :url])) :1x1))]
        [touchable-highlight {:key (:id art)
                              :on-press #(navigate-replace! (assoc route :active-id (:id art)))}
         [view {:style {:width (:width dimensions)
                        :background-color (:lightest-gray colors)
                        :height 60
                        :flex-direction "row"
                        :justify-content "center"
                        :flex-wrap "nowrap"
                        :border-bottom-width 1
                        :border-bottom-color (:semi-gray colors)}}
          [image {:source {:uri photo-url}
                  :resize-mode "cover"
                  :style {:width 60}}]
          (if (= (:id art) (:active-id route))
            [view {:style {:width 4
                           :border-left-width 4
                           :border-left-color (:red colors)}}]
            [view {:style {:width 4
                           :border-left-width 4
                           :border-left-color (:lightest-gray colors)}}])
          [view {:style {:flex 1
                         :align-items "center"
                         :flex-direction "row"
                         :padding-horizontal 12}}
           [view {:style {:flex 1
                          :flex-direction "column"
                          :justify-content "center"}}
            [text {:number-of-lines 1
                   :style {:color (:gray colors)
                           :font-size 18 
                           :font-weight "500"}} (str/trim name)]
            [text {:number-of-lines 1
                   :style {:color (:gray colors)}} (:name campus)]]
           [view {:style {:flex-direction "row"}}
            [touchable-highlight {:underlay-color "transparent"
                                  :on-press #(navigate-go! {:key "add-to-list" :id (:id art)})}
             [image {:source img-add-existing
                     :resize-mode "contain"
                     :style {:margin-horizontal 12
                             :width 30
                             :height 30}}]]
            [touchable-highlight {:underlay-color "transparent"
                                  :on-press #(navigate-go! {:key "routing" :id (:id art)})}
             [image {:source img-location
                     :resize-mode "contain"
                     :style {:margin-horizontal 12
                             :width 30
                             :height 30}}]]]]]]))
    
    (defn render [ctx]
      (let [{:keys [top-padding
                    dimensions]} (get-dimensions)
            nearby (sub> ctx :nearby-art-pieces)
            route (current-route> ctx)
            list-is-expanded? (r/atom false)]
        (fn []
          [view {:style {:flex 1
                         :width (:width dimensions)
                         :margin-top top-padding}}
           [(ui/component ctx :top-bar)] 
          (when (sub> ctx :show-map?)
             [view {:style {:flex 1}}
              [(ui/component ctx :map) {:style {:width (:width dimensions)
                                                :flex 1}}
               (when-let [user-location (select-keys (:coords (sub> ctx :geolocation)) [:latitude :longitude])]
                 [user-marker {:coordinate user-location}])
               (doall
                (map (fn [art]
                       (when-let [location (set/rename-keys (:geoLocation art) {:lat :latitude :lon :longitude})] 
                         (if (= (:id art) (:active-id (current-route> ctx)))
                           [active-marker {:key (:id art)
                                           :coordinate location}]
                           [marker {:key (:id art)
                                    :coordinate location
                                    :on-press #(navigate-replace! (assoc route 
                                    :active-id (:id art))}]))) nearby))]])
           [view {:style {:height (if (= false @list-is-expanded?) 80 (+ 20 (* 60 (min (max 1 (count nearby)) 4))))
                          :width (:width dimensions)
                          :margin-bottom 60}}
            [touchable-highlight {:on-press #(swap! list-is-expanded? not)}
             [view {:style {:height 20
                            :width (:width dimensions)
                            :background-color (:gray colors)}}]]
            [scroll-view {:id "art-list-view"}
             (doall (map (fn [art]
                           (render-link ctx art)) nearby))]]
           [(ui/component ctx :tab-bar)]
           [(ui/component ctx :sidebar)]])))
    

    在按下标记时,我需要向下滚动id为“艺术列表视图”的ScrollView。

    有人能帮忙吗?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Tessy Thomas    6 年前

    我可以通过使用动画滚动视图和以下代码来修复此问题:

    [marker {:key (:id art)
                                    :coordinate location
                                    :on-press (fn []
                                      (when-let [s @scroll-atom]
                                       (navigate-replace! (assoc route :active-id (:id art)))
                                       (ocall s "_component.scrollTo" #js {:x 0 :y (* index 60) :animated false})))}]
    

    列表视图:

    [animated-scroll-view {:id "art-list-view"
                                    :ref #(reset! scroll-atom %)}
             (doall (map (fn [art]
                           (render-link ctx art)) nearby))]]