简介
@johnnylc/rn-custom-ui-kit 是一款 React Native 自定义 UI 组件库。它包含一系列常用的 UI 组件，可以帮助开发者快速搭建移动应用程序的用户界面。
安装
通过 npm 安装：
npm install @johnnylc/rn-custom-ui-kit --save
使用示例
Button
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------------------------
----- --- - -- -- -
------ -
------- ----------- -- ----------------------
----- ---
---------
--
--
------ ------- ----Input
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- - ---- -----------------------------
----- --- - -- -- -
----- ------ -------- - -------------
------ -
------
------------------ ---- -----
------------
----------------------
--
--
--
------ ------- ----CheckBox
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - -------- - ---- -----------------------------
----- --- - -- -- -
----- ----------- ------------- - ----------------
------ -
---------
---------------------
----------- -- -------------------------
--
--
--
------ ------- ----API 文档
Button
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| onPress | 按钮点击回调函数 | () => void | - |
| children | 按钮文本 | React.ReactNode | - |
| style | 样式 | ViewStyle | - |
| textStyle | 文本样式 | TextStyle | - |
Input
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 输入框的值 | string | |
| onChangeText | 输入框值改变回调 | (text: string) => void | - |
| placeholder | 占位符 | string | |
| secureTextEntry | 是否隐藏文本 | boolean | false |
| maxLength | 最大长度 | number | - |
| style | 样式 | ViewStyle | - |
CheckBox
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| isChecked | 是否选中 | boolean | false |
| onPress | 点击回调函数 | () => void | - |
| containerStyle | 外部包裹容器样式 | ViewStyle | - |
| boxStyle | 复选框样式 | ViewStyle | - |
| checkStyle | 选中样式 | ViewStyle | - |
| label | 标签显示内容 | string | - |
| labelStyle | 标签样式 | TextStyle | - |
指导意义
@johnnylc/rn-custom-ui-kit 能够减少 React Native 应用程序的开发时间，提高用户界面的一致性。开发者可以通过自定义样式，轻松定制自己的应用程序风格。
通过使用本库，开发者可以学习到如何实现常见的 UI 组件。例如，如何使用 TouchableOpacity 来实现一个按钮，如何使用 TextInput 来实现一个输入框等。
总之，本库对于熟悉 React Native 开发的开发者来说，是一款非常有用的工具库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/100314