rnx-ui
A UI Lib for React Native
Start
1. Install
npm install rnx-ui --save
2. Use
import React, {
Component,
} from 'react';
import Btn from 'rnx-ui/Btn';
function Demo(props) {
return <Btn />;
}
Overview
🖌
designing(7) 🛠
developing(1) ✅
done(30)
Component
Name | Description | State |
---|---|---|
ActionSheet | 上拉按钮组 | ✅ |
AddAndSubtract | 加减法动画组件 | ✅ |
Alert | 警告弹框 | ✅ |
All | 页面容器 | ✅ |
Badge | 角标 | ✅ |
Btn | 按钮 | ✅ |
CardView | 卡片视图 | ✅ |
Checkbox | 选择框 | 🖌 |
Confirm | 确认弹框 | ✅ |
Dialog | 对话框 | ✅ |
Drop | 掉落动画组件 | ✅ |
DynamicText | 文本框(滚动显示过长文字) | ✅ |
HeaderedSheet | 有标题栏的底部弹层 | ✅ |
Icon | 字体图标 | 🖌 |
ImgHolder | 带占位的图片 | ✅ |
ImgPicker | 图片选择组件 | ✅ |
ImgRollView | 图片选择组件 | ✅ |
KeyboardAdaptiveView | 适应键盘的容器 | ✅ |
Loading | 菊花加载中动画 | ✅ |
LoadingBtn | 带菊花图的按钮 | 🖌 |
NavBar | 导航栏 | ✅ |
Number | 数字 | 🛠 |
NumericKeyboard | 虚拟数字键盘 | ✅ |
Overlay | 遮罩层 | ✅ |
PlaceholderText | 有占位元素的文本显示组件 | ✅ |
PlaceholderInput | 可以自定义占位元素的输入框 | ✅ |
PswdInput | 密码输入框(带有用于切换密码显隐的“眼睛”按钮) | 🖌 |
PhoneNumInput | 手机号码输入框 | ✅ |
RefreshView | 滚动列表(带下拉刷新、上拉加载) | ✅ |
Select | 选择器(带有向上弹出和向下隐藏的动画、遮罩、取消确定标题栏) | 🖌 |
Sheet | 底部弹层 | ✅ |
SlideMenu | 侧滑菜单 | 🖌 |
SmsCaptchaInput | 短信验证码输入框 | ✅ |
TabBar | 横向点击栏 | ✅ |
ToolTip | 提示框 | ✅ |
VirtualPasswordInput | 虚拟密码输入框 | ✅ |
Web | 类微信浏览器 | 🖌 |
Util
Name | Description | State |
---|---|---|
transPxToDp | 像素(px)转虚拟像素(dp)方法 | ✅ |
Validator | 表单校验工具 | ✅ |
Example
将项目克隆至本地后:
1. Install
npm install
2. Run
react-native run-ios