概述

欢迎使用 @blankapp/ui,本文档将帮助您快速上手。如果您在使用过程中遇到问题,请查看问题解答中的解答,或者在 GitHub 上提问。

简介

高可定制和主题化的 React Native 组件库, 在这里查看在线演示。

特性

  • 轻依赖,非常少的依赖。
  • 全局主题化,多种样式选择器的实现。
  • 丰富的基础组件。
  • 友好的 API 设计。

Live Demo



快速开始

必备条件

开始之前确保你已安装:

安装

创建一个新的 React Native 项目:

$ react-native init HelloWorld
$ cd HelloWorld

安装 @blankapp/ui 到您的项目中:

$ yarn add @blankapp/ui

如果你需要使用高级组件,安装 @blankapp/ui-pro 并链接到您的项目中:

$ yarn add @blankapp/ui-pro

现在,只需将以下内容复制到 React Native 项目的 index.js 文件:

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Theme, { ThemeProvider, Screen, Text} from '@blankapp/ui';
import defaultTheme from '@blankapp/ui/src/resources/themes/default';
import defaultThemePro from '@blankapp/ui-pro/src/resources/themes/default';

// 注册默认主题
Theme.registerTheme('default', [
defaultTheme,
defaultThemePro,
]);

class Examples extends Component {
render() {
return (
<ThemeProvider>
<Screen>
<Text>Hello World</Text>
</Screen>
</ThemeProvider>
);
}
}

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

P.S. 如是你想快速开始一个项目,可使用我们为你准备的项目模板 react-native-template-ui-based

运行程序

  • 在 Android 上运行:
$ react-native run-android
$ adb reverse tcp:8081 tcp:8081 # required to ensure the Android app can
  • 在 iOS 上运行:
$ react-native run-ios