Home

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

After clone this repository to your local:

1. Install

npm install

2. Run

react-native run-ios

Overview

🖌 designing(7) 🛠 developing(1) ✅ done(31)

Component

Name	Description	State
ActionSheet	ActionSheet with iOS style	✅
AddAndSubtract	add button and subtract button with animation	✅
Alert	dialog box for alert	✅
All	page container with StatusBar	✅
Badge	Badge	✅
Btn	Button	✅
CardView	card-like view with animation	✅
Checkbox	Checkbox	🖌
Confirm	dialog box for confirm	✅
Dialog	dialog box	✅
Drop	a set of components for dropping animation	✅
DynamicText	Text with scrolling animation	✅
HeaderedSheet	Sheet popping from button with a header	✅
Icon	Icon	🖌
ImgHolder	Image with a placeholder	✅
ImgPicker	图片选择组件	✅
ImgRollView	图片选择组件	✅
KeyboardAdaptiveView	适应键盘的容器	✅
Loading	菊花加载中动画	✅
LoadingBtn	带菊花图的按钮	🖌
NavBar	导航栏	✅
Number	数字	🛠
NumericKeyboard	虚拟数字键盘	✅
Overlay	遮罩层	✅
PhoneNumInput	手机号码输入框	✅
PlaceholderInput	可以自定义占位元素的输入框	✅
PlaceholderText	有占位元素的文本显示组件	✅
PswdInput	密码输入框（带有用于切换密码显隐的“眼睛”按钮）	🖌
RefreshView	滚动列表（带下拉刷新、上拉加载）	✅
Select	选择器（带有向上弹出和向下隐藏的动画、遮罩、取消确定标题栏）	🖌
Sheet	底部弹层	✅
SlideMenu	侧滑菜单	🖌
SmsCaptchaInput	短信验证码输入框	✅
TabBar	横向点击栏	✅
ToolTip	提示框	✅
VirtualPasswordInput	虚拟密码输入框	✅
Web	类微信浏览器	🖌

Util

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