国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

@blankapp/ui，高可定制和主題化的 React Native 組件庫

Mike617 / 1573人閱讀

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

從今年3月開始，經過一段時間的思考，我拋棄了我之前一直掛在口上的全棧的自稱，希望可以將我的 100% 的精力都集中在一個方向的技術棧上，從而開始了我的 React Native 路。

在項目初期，我像拼積木一樣不斷的往項目的 package.json 里加上了各種各樣的組件庫，在遭遇 React Native 的大版本升級和項目體量不斷上升，項目代碼變得越來越不可控，并且慢慢意識到導致這種情況的原因有很大一部分是因為依賴了太多的組件，而最早引用的組件庫 @shoutem/ui 依賴的組件非常的多，而且很大部分是我的項目使用不到的，所以在幾個月前我在工作之余就慢慢嘗試實現了自己的 ui 組件庫，在這個項目已經達到了可用狀態時，我用了將近三周時間將公司的項目重寫了，并且使用了這個庫，并且在這兩周利用完善了文檔。

所以，現在很高興能把這個項目分享給大家，希望我的工作可以對你有一定的幫助。

簡介

高可定制和主題化 React Native 組件庫

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

特性

輕依賴，非常少的依賴

全局主題化，多種樣式選擇器的實現

豐富的基礎組件

友好的 API 設計

Live Demo

如果 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 (
      
        
          Hello World
        
      
    );
  }
}

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` 就可以使用該樣式了
// 例：

PS. 如果你需要構建一個完整的主題，請查看默認主題的定義。

自定義組件

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

首先創建你的樣式表文件

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

使用 withStyles 函數將樣式應用到你的組件

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

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

export default Title;
基礎組件

以下通過一些簡單的示例組件代碼，讓你更快入門本項目。

Button
禁用狀態
加載中狀態
尺寸的變化形式
CheckBox
禁用狀態
選中狀態
項目討論

如果你對本項目有任何建議或問題，可以通過 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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84976.html

相關文章

  • 搜集React、Vue、Angular和傳統UI組件庫以及后臺管理平臺模板

    摘要：高顏值好用易擴展的微信小程序庫，有贊。一套高質量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現的后臺管理系統模板一個后臺管理系統模板是一套組件化框架，支持定制主題，主要服務于前臺及中后臺產品。基于后臺管理系統。 快來Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    zhangrxiang 評論0 收藏0

  • 搜集React、Vue、Angular和傳統UI組件庫以及后臺管理平臺模板

    摘要：高顏值好用易擴展的微信小程序庫，有贊。一套高質量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現的后臺管理系統模板一個后臺管理系統模板是一套組件化框架，支持定制主題，主要服務于前臺及中后臺產品。基于后臺管理系統。 快來Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    source 評論0 收藏0

  • 11個React Native 組件庫和 Javascript 數據可視化庫

    摘要：數據可視化庫超過的的可能是最流行和最廣泛的數據可視化庫。是一組組件，用于高效地渲染大型列表和表格數據。一種優雅而靈活的方式，可以利用組件來支持實際的數據可視化。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ React Native 組件庫 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

    tangr206 評論0 收藏0

  • Yoshino: 一個基于React的可定制化的PC組件庫

    摘要：開發者只需要結合就能像配置主題一樣輸出不同風格的組件。除了簡單通用的組件，抽離出了一些易用性比較高的特效功能組件，例如安裝使用方法 Github: https://github.com/Yoshino-UI... Docs: https://yoshino-ui.github.io/#/ Cli-Tool: https://github.com/Yoshino-UI... 安利一...

    caoym 評論0 收藏0

發表評論

0條評論

Mike617

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<