简介
custom-react-native-lit 是一个 custom-elements-react-native-adapter 的封装包，为 React Native 中使用 Web Components 提供了支持。它同时还提供了一些自定义组件，如 Modal、Toast、Loading 等。
安装
你可以通过 npm 安装 custom-react-native-lit，只需要执行以下命令即可：
npm install --save custom-react-native-lit
或者使用 yarn：
yarn add custom-react-native-lit
使用
使用 custom-react-native-lit，你需要首先在你的 React Native 项目中导入 StyleSheet 和 StatusBar 组件，并将 Web Components 注册到 React Native 中。
注册组件
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- --------- - ---- ---------------
------ - -------------------- - ---- ---------------------------------------
------ - ------ ------ ------- - ---- --------------------------
-----------------------------
------ ------- -------- ----- -
------ -
--
---------- ----------------------- --
------ --
------ --
-------- --
---
--
-使用组件
使用 custom-react-native-lit 组件跟使用原生的组件一样，我们来看一个 Modal 组件的例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ - --------- - ---- --------------------------
------ ------- -------- ----- -
----- -------- ---------- - ----------------
-------- ----------------- -
----------------
-
-------- ------------------ -
-----------------
-
------ -
----- -------------------------
----------------- --------------------------
---------- ------------
-------------------
------ --------------- ---------------------------
----- ---------------------
----------- --------------
-------
--------
-------
--
-
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
--
------ -
---------------- --------
-------- ---
--
---modal 组件提供 isOpen 属性表示是否显示模态框，onClose 属性表示模态框关闭时的回调函数。
其它组件
custom-react-native-lit 还提供了其它自定义组件，使用方法类似，这里就不一一列举了。
总结
custom-react-native-lit 提供了 React Native 中使用 Web Components 的支持，同时也提供了一些自定义组件，可以帮助我们更方便地开发应用。如果你需要在 React Native 中使用 Web Components，或者需要一些常用的自定义组件，可考虑使用 custom-react-native-lit。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cdc81e8991b448e68cd