从今年 3 月开始，经过一段时间的思考，我抛弃了我之前一直挂在口上的全栈的自称，希望可以将我的 100% 的精力都集中在一个方向的技术栈上，从而开始了我的 React Native 路。
在项目初期，我像拼积木一样不断的往项目的 package.json 里加上了各种各样的组件库，在遭遇 React Native 的大版本升级和项目体量不断上升，项目代码变得越来越不可控，并且慢慢意识到导致这种情况的原因有很大一部分是因为依赖了太多的组件，而最早引用的组件库 @shoutem/ui 依赖的组件非常的多，而且很大部分是我的项目使用不到的，所以在几个月前我在工作之余就慢慢尝试实现了自己的 ui 组件库，在这个项目已经达到了可用状态时，我用了将近三周时间将公司的项目重写了，并且使用了这个库，并且在这两周利用完善了文档。
所以，现在很高兴能把这个项目分享给大家，希望我的工作可以对你有一定的帮助。
高可定制和主题化 React Native 组件库
浏览 blankapp.org 上的文档，或者在我们的 Live demo 中试用。
如果 Appetize 服务不显示，点击这里查看 Live demo 。
开始之前确保你已安装：
创建一个新的 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 来更改组件的样式
export default {
Button: {
activeOpacity: 0.8,
paddingLeft: 8,
paddingRight: 8,
paddingTop: 0,
paddingBottom: 0,
},
};
disabled 为 true，应用以下样式）export default {
'Button[disabled=true]': {
opacity: 0.4,
},
};
export default {
'Button[size=mini]': {
Text: {
fontSize: 14,
},
},
};
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. 如果你需要构建一个完整的主题，请查看默认主题的定义。
很多情况下，我们需要定义一些自己的组件用于满足我们的业务需求，所以您也可以很方便的构建一个自己的组件。
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 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 text={'CheckBox'} />
<CheckBox text={'CheckBox'} disabled />
<CheckBox text={'CheckBox'} checked />
如果你对本项目有任何建议或问题，可以通过 Gitter 或本人私人微信进行讨论。
PS. 目前我的团队（深圳）正在招聘 ReactJS 和 React Native 的工程师，欢迎自荐或推荐优秀人才。
这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.