@blankapp/ui，高可定制和主题化的 React Native 组件库

从今年3月开始，通过一段时间的思考，我抛弃了我以前一直挂在口上的全栈的自称，但愿能够将个人 100% 的精力都集中在一个方向的技术栈上，从而开始了个人 React Native 路。

在项目初期，我像拼积木同样不断的往项目的 package.json 里加上了各类各样的组件库，在遭遇 React Native 的大版本升级和项目体量不断上升，项目代码变得愈来愈不可控，而且慢慢意识到致使这种状况的缘由有很大一部分是由于依赖了太多的组件，而最先引用的组件库 @shoutem/ui 依赖的组件很是的多，并且很大部分是个人项目使用不到的，因此在几个月前我在工做之余就慢慢尝试实现了本身的 ui 组件库，在这个项目已经达到了可用状态时，我用了将近三周时间将公司的项目重写了，而且使用了这个库，而且在这两周利用完善了文档。

因此，如今很高兴能把这个项目分享给你们，但愿个人工做能够对你有必定的帮助。

简介

高可定制和主题化 React Native 组件库

浏览 blankapp.org 上的文档，或者在咱们的 Live demo 中试用。

特性

• 轻依赖，很是少的依赖
• 全局主题化，多种样式选择器的实现
• 丰富的基础组件
• 友好的 API 设计

Live Demo

<iframe src="https://appetize.io/embed/q0w... width="300px" height="597px" frameborder="0" scrolling="no"></iframe>

若是 Appetize 服务不显示，点击这里查看 Live demo 。

快速开始

必备条件

开始以前确保你已安装：

• 已安装 Yarn
• 已安装 React Native

安装

建立一个新的 React Native 项目：

$ react-native init HelloWorld
$ cd HelloWorld

安装 @blankapp/ui 并连接到您的项目中：

$ yarn add @blankapp/ui

如今，只需将如下内容复制到 React Native 项目的 index.ios.js 文件：

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Theme, {
  ThemeProvider,
  Screen,
  Text,
} from '@blankapp/ui';

const drakTheme = {
  'Screen': { backgroundColor: 'black' },
  'Text': { color: 'white' },
};

Theme.registerTheme('dark', drakTheme);

class Examples extends Component {
  render() {
    // 须要将 ThemeProvider 添加到程序入口组件中。
    return (
      <ThemeProvider theme={'dark'}>
        <Screen>
          <Text>Hello World</Text>
        </Screen>
      </ThemeProvider>
    );
  }
}

AppRegistry.registerComponent('Examples', () => Examples);

PS. 默认提供一套主题，你能够经过 Live demo 查看效果，若是须要定义您的专属样式，请继续往下看。

运行程序

• 在 Android 上运行：

  $ react-native run-android
  $ adb reverse tcp:8081 tcp:8081   # required to ensure the Android app can

• 在 iOS 上运行：

  $ react-native run-ios

进阶特性

主题选择器

经过实现了一些相似于 CSS 的样式选择器，如今咱们能够很方便的经过组件的 Props 来更改组件的样式

已完成选择器：

组件选择器（Button 组件，应用如下样式）

export default {
  Button: {
    activeOpacity: 0.8,
    paddingLeft: 8,
    paddingRight: 8,
    paddingTop: 0,
    paddingBottom: 0,
  },
};

属性选择器（Button 组件，当属性 disabled 为 true，应用如下样式）

export default {
  'Button[disabled=true]': {
    opacity: 0.4,
  },
};

层级选择器（Button 组件下全部 Text 组件，应用如下样式）

export default {
  'Button[size=mini]': {
    Text: {
      fontSize: 14,
    },
  },
};

计划中的选择器：

类选择器（styleName、className）

export default {
  // Come soon
};

PS. 若是您须要更深刻的去了解选择器的使用，请查看默认主题的定义。

自定义主题

固然，每一个项目的设计风格确定各有不一样，默认主题不少状况下没法知足实际的开发须要，因此须要您本身自定义主题。

import Theme, { ThemeProvider } from '@blankapp/ui';

// 定义一个样式表
const drakTheme = {
  'Screen': { backgroundColor: 'black' },
  'Text': { color: 'white' },
};

// 注册一个 `dark` 样式
Theme.registerTheme('dark', drakTheme);

// 将 `theme` 属性设为 `dark` 就可使用该样式了
// 例：<ThemeProvider theme={'dark'} />

PS. 若是你须要构建一个完整的主题，请查看默认主题的定义。

自定义组件

不少状况下，咱们须要定义一些本身的组件用于知足咱们的业务需求，因此您也能够很方便的构建一个本身的组件。

1. 首先建立你的样式表文件

export default {
  Title: {
    backgroundColor: 'transparent',
    color: '#FFFFFF',
    fontSize: 17,
    fontWeight: '500',
    marginBottom: 4,
  },
};

1. 使用 withStyles 函数将样式应用到你的组件

import { Text as RNText } from 'react-native';
import { withStyles } from '@blankapp/ui';

// 为了方便，这里直接将 `Text` 组件应用上了 `Title` 样式。
const Title = withStyles('Title')(RNText);

export default Title;

基础组件

如下经过一些简单的示例组件代码，让你更快入门本项目。

Button

<Button text={'Button'} />

禁用状态

<Button text={'Button'} disabled />

加载中状态

<Button text={'Button'} loading />

尺寸的变化形式

<Button size={'mini'} text={'MINI'} />
<Button size={'small'} text={'SMALL'} />
<Button size={'medium'} text={'MEDIUM'} />
<Button size={'large'} text={'LARGE'} />
<Button size={'big'} text={'BIG'} />

CheckBox

<CheckBox text={'CheckBox'} />

禁用状态

<CheckBox text={'CheckBox'} disabled />

选中状态

<CheckBox text={'CheckBox'} checked />

项目讨论

若是你对本项目有任何建议或问题，能够经过 Gitter 或本人私人微信进行讨论。

PS. 目前个人团队（深圳）正在招聘 ReactJS 和 React Native 的工程师，欢迎自荐或推荐优秀人才。

参考项目

• https://github.com/shoutem/ui
• https://github.com/airbnb/rea...
• https://github.com/hexojs/site

相关连接

• 源码地址：https://github.com/blankapp/ui
• 文档地址：http://blankapp.org