styled-react-native-pin-view 是一款基于 React Native 的 npm 包，主要用于快速构建 PIN 码输入视图。它结合了 styled-components 和 React Native 的 CSS 样式属性，提供了可自定义的 PIN 码输入样式。
本教程将会介绍如何使用 styled-react-native-pin-view 搭建 PIN 码输入视图，并为你展示如何使用该包提供的样式属性来实现个性化的 PIN 码输入样式。
安装
使用 npm 安装 styled-react-native-pin-view：
npm install styled-react-native-pin-view
基本用法
在 App.js 中引入 PinView 组件并进行基本配置：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -------------------------------
------ ------- ----- --- ------- --------------- -
-------- -
------ -
-------- --
-
-
-将会生成一个默认的 PIN 码输入视图。
定义密码长度
默认情况下，输入框的数量为 6，你可以通过传递 pinLength 属性对密码长度进行定义：
<PinView pinLength={8} />输入密码
PinView 提供了回调函数 onComplete 和 onChange，你可以通过这些函数来捕获 PIN 码的输入和修改，也可以在适当的时候清除输入框的值：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -------------------------------
------ ------- ----- --- ------- --------------- -
----- - -
---- ---
-
-------------- - ----- -- -
--------------- --- --
-
------------ - ----- -- -
-- ----------- --- -- -
--------------- --- --
-
-
-------- -
----- - --- - - ----------
------ -
--------
--------------------------------
----------------------------
--
-
-
-样式化
styled-react-native-pin-view 提供了可自定义的样式属性。在下面的例子中，我们将使用 styled-components 和 css 属性来自定义输入框的样式。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -------------------------------
------ ------- - --- - ---- ---------------------------
----- --------- - ------------
--------------- ----
---------------- --------------
--
----- ----- - -----------------
------ -----
------- -----
------- --- ----- --------
-------------- -----
---------- -----
--
------ ------- ----- --- ------- --------------- -
----- - -
---- ---
-
-------------- - ----- -- -
--------------- --- --
-
------------ - ----- -- -
-- ----------- --- -- -
--------------- --- --
-
-
-------- -
----- - --- - - ----------
------ -
-----------
--------
--------------------------------
----------------------------
-------------------------
--
------------ - -------------------- ------ -- -
------
-----------
----------------- -- ---
----------------
---------------------------
-------------------
----------------------
-------------
------------------
------------------------
------------------
----------------------
--------------------------
---------------------
--
---
------------
-
-
-下面是我们自定义化后的 PIN 码输入视图：
总结
在本教程中，我们学习了如何使用 styled-react-native-pin-view 构建自定义 PIN 码输入视图，并重点介绍了如何使用 styled-components 和 css 属性来自定义样式。
通过这篇教程，你已经学会了如何快速地使用 styled-react-native-pin-view 包，并可根据自己的需求完全自定义 PIN 码输入视图的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822be9