在 ClojureScript 项目中使用 ReactNative 外部库 - 语法

Question

我正在尝试在 clojurescript 中使用 react-native-swipe-list-view。但是我在将记录的 js 代码转换为 cljs 代码时遇到了一些麻烦。

文档：

import { SwipeRow } from 'react-native-swipe-list-view';
<SwipeRow>
     <View>
     </View>
</SwipeRow>

我的 Cljs 代码：

(:require [react-native-swipe-list-view :as swipe_list])

(defn item[]
(
    [swipe_list/SwipeRow
    [:View]]
))

在线tool:

(def SwipeRow (.-SwipeRow (js/require "react-native-swipe-list-view")))
(defn item[]
(
    [SwipeRow
    [:View]]
))

以上的

None 有效。我是 cljs 的新手。如果有人能告诉我如何将上面的 js 行转换为 cljs，那将是一个很大的帮助。谢谢

Answer 1

试剂文件：Creating Reagent "Components" from React Components

这里我要创建两个试剂组件，view和swipeRow。我对两者都使用了不同的方式，以展示导入库和创建组件的两种方式。您可以使用任何一种。

;; Importing Reagent and React Native
(ns type_name_server_here
  (:require [reagent.core :as reagent]
            ["react-native" :as rn]))


;; 1st Way: Importing SwipeRow
(def SwipeRowImport (.-SwipeRow (js/require "react-native-swipe-list-view")))
;; Converting it into Reagent Component
(def SwipeRow (reagent/adapt-react-class SwipeRowImport))

;; 2nd Way: Importing View from already imported react-native library and converting it into reagent component
(def view (reagent/adapt-react-class (.-View ^js rn)))

;; SwipeRow requires two children (Check out documentation)
(defn item[]
(
    [SwipeRow
    [view] [view]]
))

如果你使用的是 shadow-cljs，你可以使用这个 table 作为参考，用于将 ES6 Import 语句转换为 CLJS Require

在 ClojureScript 项目中使用 ReactNative 外部库 - 语法

Using ReactNative External library in ClojureScript Project - Syntax

clojurescript

reagent

react-native

clojurescript-javascript-interop