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

Mike617 发布于2019-08-20 18:58 / 1572人阅读

摘要：简介高可定制和主题化组件库浏览上的文档，或者在我们的中试用。特性轻依赖，非常少的依赖全局主题化，多种样式选择器的实现丰富的基础组件友好的设计如果服务不显示，点击这里查看。

从今年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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84976.html

搜集React、Vue、Angular和传统UI组件库以及后台管理平台模板

摘要：高颜值好用易扩展的微信小程序库，有赞。一套高质量的微信小程序组件库。用和搭建的一个通用管理后台基于实现的后台管理系统模板一个后台管理系统模板是一套组件化框架，支持定制主题，主要服务于前台及中后台产品。基于后台管理系统。快来Star，在这里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

zhangrxiang 2019-08-29 13:59 评论0 收藏0
搜集React、Vue、Angular和传统UI组件库以及后台管理平台模板

摘要：高颜值好用易扩展的微信小程序库，有赞。一套高质量的微信小程序组件库。用和搭建的一个通用管理后台基于实现的后台管理系统模板一个后台管理系统模板是一套组件化框架，支持定制主题，主要服务于前台及中后台产品。基于后台管理系统。快来Star，在这里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

source 2019-08-21 18:01 评论0 收藏0
11个React Native 组件库和 Javascript 数据可视化库

摘要：数据可视化库超过的的可能是最流行和最广泛的数据可视化库。是一组组件，用于高效地渲染大型列表和表格数据。一种优雅而灵活的方式，可以利用组件来支持实际的数据可视化。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ React Native 组件库 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

tangr206 2019-08-23 17:11 评论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 2019-08-02 16:04 评论0 收藏0