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 />;
}

Demo

将项目克隆至本地后：

1. Install

npm install

2. Run

react-native run-ios

Overview

🖌 designing(6) 🛠 developing(1) ✅ done(32)

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	遮罩层	✅
PhoneNumInput	手机号码输入框	✅
PlaceholderInput	可以自定义占位元素的输入框	✅
PlaceholderText	有占位元素的文本显示组件	✅
Progress	进度条	✅
RefreshView	滚动列表（带下拉刷新、上拉加载）	✅
Select	选择器（带有向上弹出和向下隐藏的动画、遮罩、取消确定标题栏）	🖌
Sheet	底部弹层	✅
SlideMenu	侧滑菜单	🖌
SmsCaptchaInput	短信验证码输入框	✅
TabBar	横向点击栏	✅
ToolTip	提示框	✅
VirtualPasswordInput	虚拟密码输入框	✅
Web	类微信浏览器	🖌

Util

Name	Description	State
transPxToDp	像素（px）转虚拟像素（dp）方法	✅
Validator	表单校验工具	✅