在ClojureScript项目中使用react-native-swipe-list-view的语法问题

正确CLJS实现（基于shadow-cljs + Reagent 主流技术栈） #

1. 命名空间导入写法 #

在文件顶部的ns声明中按如下方式导入组件：

(ns 你的项目命名空间
  (:require ["react-native" :refer [View]]
            ["react-native-swipe-list-view" :refer [SwipeRow]]))

如果使用旧版构建工具不支持ES模块导入语法，可改用如下写法：

(ns 你的项目命名空间
  (:require [react-native :as rn]
            [react-native-swipe-list-view :as swipe-list]))

2. 组件实现写法 #

Reagent中调用原生JS React组件需要使用:> 语法，同时不要给函数体加多余的括号：

;; 对应第一种导入写法
(defn item []
  [:> SwipeRow
   [:> View]])

;; 对应第二种导入写法
(defn item []
  [:> swipe-list/SwipeRow
   [:> rn/View]])

如果你使用的是旧版Reagent，也可以提前包装组件后直接调用：

(require '[reagent.core :as r])

(def SwipeRow (r/adapt-react-class swipe-list/SwipeRow))
(def View (r/adapt-react-class rn/View))

(defn item []
  [SwipeRow
   [View]])

之前写法的错误原因 #

• 组件函数实现多了一层多余的括号，相当于将返回的hiccup vector当做函数执行，会直接抛出类型错误
• 没有使用:> 语法调用JS原生React组件，直接将导入的组件对象放在hiccup vector首位，Reagent无法识别为React组件
• 直接写[:View]是错误写法，View是react-native导出的原生组件，需要导入后调用，不能直接用关键字声明

内容的提问来源于stack exchange，提问作者parvesh