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

news/2024/2/29 2:54:43

从今年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 组件,当属性 disabledtrue,应用以下样式)
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

https://www.jiucaihua.cn/news/show-2655927.html

相关文章

【PostGIS】问题解决——Operation on mixed SRID geometries

问题描述 在做空间分析的时候&#xff0c;SQL语句报如下错误&#xff1a; WARN org.hibernate.engine.jdbc.spi.SqlExceptionHelper - SQL Error: 0, SQLState: XX000 2021-09-26 13:46:58.254 [http-nio-8080-exec-11] ERROR org.hibernate.engine.jdbc.spi.SqlExceptionHelp…

利用pylot进行性能测试

介绍l 基于python编写的性能测试工具&#xff0c;简单、易用&#xff0c;可以完成不太复杂的性能测试。l 目前只能基于python2.5 32位来使用&#xff0c;比较遗憾&#xff0c;而且貌似已经不在维护了&#xff0c;唉安装l 先安装python2.5 32位&#xff0c;并修改环境变量l 下载…

CentOS 7系统离线安装gcc,gcc-c++

一、首先&#xff0c;你要下载一个CentOS7的系统镜像&#xff08;https://www.centos.org/download/&#xff09; 二、然后解压ISO镜像&#xff0c;去里面找gcc&#xff0c;gcc-c缺少的安装包&#xff0c;放在你CentOS 7的系统里面自己新建一个文件夹 三、将文件上传到centos7…

centos 离线下载rpm文件进行安装

在运维离线部署中&#xff0c;常常会被在线安装困扰 例如下载 yum install -y sqlite-devel这个名字在在线服务器上&#xff0c;可以顺利执行&#xff0c;但在离线服务器上是无法下载。 下面提供2种方法来解决离线服务器安装离线服务的问题。 方案一(上rpmlib库去下载&#…

STL之map、set灵活使用

1、LA 5908/UVA1517 Tracking RFIDs 题意&#xff1a;给出s个传感器的位置&#xff0c;以及其感应范围。如果某个方向上有墙&#xff0c;则该方向上感应距离减1.现在有w个墙&#xff0c;给出p个物品的位置&#xff0c;问其能被几个传感器探测到。 思路&#xff1a;传感器用set保…

配置环境,pycharm

摘自百度 1.官网下载pycharm&#xff1a;http://www.jetbrains.com/pycharm/ 2.下载专业版 3.双击打开安装包 4.next . 5.next&#xff08;路径可以不更改&#xff09; 6.关联文件名后缀为.py的文件&#xff0c;初次安装最下面还有一个勾选框&#xff08;jetbrain&#x…

【七夕专题】七夕不做单身汪

2019独角兽企业重金招聘Python工程师标准>>> 七夕到啦&#xff0c;看着大街小巷一对对一双双狂撒糖专虐汪的小情侣们&#xff0c;作为单身汪的我们表示绝对不能忍啊&#xff0c;七夕不做单身汪&#xff01; 极乐Store在此奉上一组把妹交友宝鉴&#xff0c;亲们拿手不…

基本数据类型与引用数据类型的区别

类&#xff08;引用数据类型&#xff09;&#xff1a; Phone p new Phone(); Phone p1 p;//赋的是地址值&#xff0c;p1和p指向堆内存的同一个对象 System.out.println("p的像素是"p.getPx()",p1的像素是"p1.getPx());//输出的p和p1的getPx值相同&#x…

[数学建模(二)模拟退火法与旅行商问题]

1.旅行商问题 旅行商问题(Traveling Salesman Problem,TSP)&#xff0c;是由爱尔兰数学家Sir William Rowan Hamilton和英国数学家Thomas Penyngton Kirkman在19世纪提出的数学问题。它的描述是这样的&#xff1a;一名商人要到若干城市去推销商品&#xff0c;已知城市个数和各城…

centos7排查内存swap占用过高

使用free -h 查看发现服务器在可用内存还有91G的情况下&#xff0c;使用Swap分区空间 *查看内存使用情况 * $ free -m $ top //shiftm按内存占用比排序查看具体是哪进程在占用Swap分区###for i in $( cd /proc;ls |grep "^[0-9]"|awk $0 >100) ;do awk /Swap:/…
最新文章