0.0.1 • Published 6 years ago

app-design-rn v0.0.1

Weekly downloads
2
License
ISC
Repository
github
Last release
6 years ago

app-design-rn

大纲(初版)

本组件库统一使用ReactNative@0.57.0来设计开发!

- 移动端RN组件规划
    - UI规范
        - 颜色
        - 字体
        - 尺寸 
    - 基础类
        - RootView
        - ErrorBoundry
        - Icon
    - 动画类
        - OpacityUIAnimation
        - FadeUIAnimation
        - SlideUIAnimation
        - NumberAnimation
    - 弹窗类
        - Modal
        - Dialog
        - Popup
        - Popover
        - Toast
        - Loading
    - 表单类
        - Form
        - Button
        - TextInput
            - AutoComplete
        - Select
            - SelectGroup
        - Checkbox
        - Switch
        - ActionSheet
    - 营销类
        - Carousel
        - Notice
    - 页面操作类
        - RefreshControl
        - Slider
        - ProgressBar
        - Tabbar
    - 导航
        - Navigation
        - StatusBar

UI规范

UI规范主要涉及到组件的字体、颜色、尺寸等部分,该部分元素将使用独立的配置文件进行管理,并通过Context以及HOC等技术手段来下发到所有的组件。同时,允许用户在基本UI规范的基础上做定制化实现;

PS:可以参考 react-native-material-ui/withTheme

UI规范大纲如下:

- 颜色 
    - 字体颜色
    - 边框颜色
    - 背景色
    - 点击色
    - 禁用背景色
    - 强调颜色
    - 提醒信息颜色 
- 字体
    - 大小
    - 颜色
    - fontWeight / fontFamily
-  尺寸(可以考虑按照xs、sm、normal、lg四个层次进行设计,并做好平台兼容)
    - 状态栏高度
    - 导航高度
    - 按钮高度
    - 内容留白
    - 圆角
    - 底部工具栏高度
    - 列表项高度

动画类

动画类相关缓动函数请参考 缓动函数

0.0.1

6 years ago