摘要：簡(jiǎn)介高可定制和主題化組件庫(kù)瀏覽上的文檔，或者在我們的中試用。特性輕依賴，非常少的依賴全局主題化，多種樣式選擇器的實(shí)現(xiàn)豐富的基礎(chǔ)組件友好的設(shè)計(jì)如果服務(wù)不顯示，點(diǎn)擊這里查看。

從今年3月開(kāi)始，經(jīng)過(guò)一段時(shí)間的思考，我拋棄了我之前一直掛在口上的全棧的自稱(chēng)，希望可以將我的 100% 的精力都集中在一個(gè)方向的技術(shù)棧上，從而開(kāi)始了我的 React Native 路。

在項(xiàng)目初期，我像拼積木一樣不斷的往項(xiàng)目的 package.json 里加上了各種各樣的組件庫(kù)，在遭遇 React Native 的大版本升級(jí)和項(xiàng)目體量不斷上升，項(xiàng)目代碼變得越來(lái)越不可控，并且慢慢意識(shí)到導(dǎo)致這種情況的原因有很大一部分是因?yàn)橐蕾嚵颂嗟慕M件，而最早引用的組件庫(kù) @shoutem/ui 依賴的組件非常的多，而且很大部分是我的項(xiàng)目使用不到的，所以在幾個(gè)月前我在工作之余就慢慢嘗試實(shí)現(xiàn)了自己的 ui 組件庫(kù)，在這個(gè)項(xiàng)目已經(jīng)達(dá)到了可用狀態(tài)時(shí)，我用了將近三周時(shí)間將公司的項(xiàng)目重寫(xiě)了，并且使用了這個(gè)庫(kù)，并且在這兩周利用完善了文檔。

所以，現(xiàn)在很高興能把這個(gè)項(xiàng)目分享給大家，希望我的工作可以對(duì)你有一定的幫助。

高可定制和主題化 React Native 組件庫(kù)

瀏覽 blankapp.org 上的文檔，或者在我們的 Live demo 中試用。

輕依賴，非常少的依賴

全局主題化，多種樣式選擇器的實(shí)現(xiàn)

豐富的基礎(chǔ)組件

友好的 API 設(shè)計(jì)

如果 Appetize 服務(wù)不顯示，點(diǎn)擊這里查看 Live demo 。

開(kāi)始之前確保你已安裝：

已安裝 Yarn

已安裝 React Native

創(chuàng)建一個(gè)新的 React Native 項(xiàng)目：

$ react-native init HelloWorld
$ cd HelloWorld

安裝 @blankapp/ui 并鏈接到您的項(xiàng)目中：

$ yarn add @blankapp/ui

現(xiàn)在，只需將以下內(nèi)容復(fù)制到 React Native 項(xiàng)目的 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 (
      
        
          Hello World
        
      
    );
  }
}

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

PS. 默認(rèn)提供一套主題，你可以通過(guò) Live demo 查看效果，如果需要定義您的專(zhuān)屬樣式，請(qǐng)繼續(xù)往下看。

在 Android 上運(yùn)行：

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

在 iOS 上運(yùn)行：

$ react-native run-ios

通過(guò)實(shí)現(xiàn)了一些類(lèi)似于 CSS 的樣式選擇器，現(xiàn)在我們可以很方便的通過(guò)組件的 Props 來(lái)更改組件的樣式

組件選擇器（Button 組件，應(yīng)用以下樣式）

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

屬性選擇器（Button 組件，當(dāng)屬性 disabled 為 true，應(yīng)用以下樣式）

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

層級(jí)選擇器（Button 組件下所有 Text 組件，應(yīng)用以下樣式）

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

類(lèi)選擇器（styleName、className）

export default {
  // Come soon
};

PS. 如果您需要更深入的去了解選擇器的使用，請(qǐng)查看默認(rèn)主題的定義。

當(dāng)然，每個(gè)項(xiàng)目的設(shè)計(jì)風(fēng)格肯定各有不同，默認(rèn)主題很多情況下無(wú)法滿足實(shí)際的開(kāi)發(fā)需要，所以需要您自己自定義主題。

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

// 定義一個(gè)樣式表
const drakTheme = {
  "Screen": { backgroundColor: "black" },
  "Text": { color: "white" },
};

// 注冊(cè)一個(gè) `dark` 樣式
Theme.registerTheme("dark", drakTheme);

// 將 `theme` 屬性設(shè)為 `dark` 就可以使用該樣式了
// 例：

PS. 如果你需要構(gòu)建一個(gè)完整的主題，請(qǐng)查看默認(rèn)主題的定義。

很多情況下，我們需要定義一些自己的組件用于滿足我們的業(yè)務(wù)需求，所以您也可以很方便的構(gòu)建一個(gè)自己的組件。

首先創(chuàng)建你的樣式表文件

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

使用 withStyles 函數(shù)將樣式應(yīng)用到你的組件

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

// 為了方便，這里直接將 `Text` 組件應(yīng)用上了 `Title` 樣式。
const Title = withStyles("Title")(RNText);

export default Title;

以下通過(guò)一些簡(jiǎn)單的示例組件代碼，讓你更快入門(mén)本項(xiàng)目。

如果你對(duì)本項(xiàng)目有任何建議或問(wèn)題，可以通過(guò) Gitter 或本人私人微信進(jìn)行討論。

PS. 目前我的團(tuán)隊(duì)（深圳）正在招聘 ReactJS 和 React Native 的工程師，歡迎自薦或推薦優(yōu)秀人才。

https://github.com/shoutem/ui

https://github.com/airbnb/rea...

https://github.com/hexojs/site

源碼地址：https://github.com/blankapp/ui

文檔地址：http://blankapp.org