@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