@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