mcrn-ui

A UI Lib for React Native

Start

1. Install

npm install mcrn-ui --save

2. Use

// 主题设置
import { ThemeProvider } from 'mcrn-ui';

<ThemeProvider theme={{ primaryColor: 'rgb(36,199,208)' }}}>
  <App />
</ThemeProvider>

import React, {
  Component,
} from 'react';
import Btn from 'mcrn-ui/Btn';

function Demo(props) {
  return <Btn />;
}

Demo

将项目克隆至本地后：

1. Install

npm install && cd ios && pod install & cd ..

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 | 表单校验工具 | ✅

Base on rnx-ui thanks rnxteam