介绍
rnkit-excard 是一个基于 React Native 的开源组件库，专门用于开发卡片式的 UI 界面，包括卡片堆叠、卡片滑动等功能，提供了各种 UI 控件，如图标、文字等，开发者可以很方便地使用这些控件快速构建卡片 UI 界面。
环境搭建
首先，需要在电脑上安装 Node.js，进入 Node.js 官网 下载安装，然后打开控制台，运行以下代码：
npm install -g rnkit-excard
这样就可以在电脑上全局安装 rnkit-excard。
快速开始
通过 rnkit-excard 可以完成以下操作：
- 创建一个卡片堆叠
- 添加卡片
- 移除卡片
- 获取当前卡片
下面我们来一步步实现：
创建卡片堆叠
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- ---------------
----- --- ------- --------- -
-------- -
------ -
------------ --
--
-
-
------ ------- ----上面的代码创建了一个简单的卡片堆叠。可以看到，我们只需要使用 ExCardStack 组件就可以完成卡片堆叠的创建。
添加卡片
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ---- - ---- ---------------
------ ------------ - ------ - ---- ---------------
----- --- ------- --------- -
-------- -
------ -
-------------
--------
---------- --------
---------
--------
---------- --------
---------
--------
---------- --------
---------
--------------
--
-
-
------ ------- ----上面的代码基于前面创建的卡片堆叠增加了三张卡片。可以看到，我们使用 ExCard 组件来创建卡片，然后将它们作为子组件添加到 ExCardStack 组件中。
移除卡片
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- ---- - ---- ---------------
------ ------------ - ------ - ---- ---------------
----- --- ------- --------- -
----- - -
----------- --
--
---------- - -- -- -
---------------
----------- --------------------- - --
---
--
------------- -
----- ----- - ---
--- ---- - - -- - - ---------------------- ---- -
-----------
------- --------
---------- -- - ---------
---------
--
-
------ ------
-
-------- -
------ -
--
-----------------------------------------------
------- ------------- ----- ------------------------- --
---
--
-
-
------ ------- ----上面的代码增加了移除卡片的功能。我们使用 state 来记录当前卡片数量，然后在 renderCards 方法中循环创建卡片，渲染时根据卡片数量渲染卡片，通过减少 state.cardsCount 的值可以移除卡片。
获取当前卡片
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- ---- - ---- ---------------
------ ------------ - ------ - ---- ---------------
----- --- ------- --------- -
----- - -
----------- --
--
------------ - ------------------
---------- - -- -- -
---------------
----------- --------------------- - --
---
--
---------- - -- -- -
----- - ------ ---- - - -------------------------------------------
-------------- --------- --- -------------------------
--
------------- -
----- ----- - ---
--- ---- - - -- - - ---------------------- ---- -
-----------
------- --------
---------- -- - ---------
---------
--
-
------ ------
-
-------- -
------ -
--
------------ ----------------------------------------------------------
------- ------------- ----- ------------------------- --
------- ---------- ------- ----- ------------------------- --
---
--
-
-
------ ------- ----上面的代码增加了获取当前卡片的功能。我们使用 React.createRef() 方法创建一个 ref，并将该 ref 传递给 ExCardStack 组件，然后在 getCurCard 方法中使用 getCurrentItem() 方法获取当前卡片信息，展示在 alert 中。
总结
以上就是 rnkit-excard 的使用教程。我们学习了如何创建卡片堆叠、添加卡片、移除卡片和获取当前卡片。通过 rnkit-excard，开发者可以很轻松地开发卡片 UI 界面，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055feb81e8991b448dd9dc