title: Teaset
tags:

• Teaset
• 等待框

安装

npm install --save teaset

复制代码

简单的列子

import React from 'react';
import {ActivityIndicator} from 'react-native';
import {Toast, Theme} from 'teaset';

let customKey = null;
// 打开
Toast.showLoading = (text) => {
  if (customKey) {
    return;
  }
  customKey = Toast.show({
    text,
    icon: <ActivityIndicator size="large" color={Theme.toastIconTintColor} />,
    position: 'center',
    duration: 6000,
  });
};

// 关闭
Toast.hideLoading = () => {
  if (!customKey) {
    return;
  }
  Toast.hide(customKey);
  customKey = null;
};

export default Toast;


复制代码

Teaset

??English version

React Native UI 组件库, 超过 20 个纯 JS(ES6) 组件, 专注于内容展示和操作控制。

Teaset 设计精巧, 不依赖任何第三方库, 全部源代码不压缩时也只有 300+k, 即使加上图标文件也不足 600k, 如果只需要使用其中的少量组件, 也可以使用按需加载方式只加载需要使用的组件。

Teaset 组件采用 React Native 原生组件同样的风格来编写, 可以与 React Native 无缝融合开发, 你不需要太多的学习成本即可掌握。由于使用纯 JS 开发, 因此在 iOS 和 Android 下的表现形式几乎一样。

利用 Teaset, 你可以快速搭建 App 页面框架, 丰富的 UI 组件大大改善页面开发效率, 强大的 Overlay 浮层类把你从繁琐的交互控制中解放出来, 使得你可以专注于业务与逻辑。

[外链图片转存失败, 源站可能有防盗链机制, 建议将图片保存下来直接上传 (img-ohStYd4J-1616911629697)(github.com/rilyu/tease…)] [外链图片转存失败, 源站可能有防盗链机制, 建议将图片保存下来直接上传 (img-Rhbo3LOM-1616911629706)(https://github.com/rilyu/teaset/blob/master/screenshots/00-Teaset2.png?raw=true)]

快速上手

安装

在你的 React Native App 工程根目录下执行以下命令进行安装:

npm install --save teaset

复制代码

Hello world

从 teaset 包中 import 组件即可使用

import React, {Component} from 'react';
import {View, AppRegistry} from 'react-native';

import {Label} from 'teaset';

class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Label size='xl' text='Hello world!' />
      </View>
    );
  }
}

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

复制代码

按需加载

使用单独 import 组件实现按需加载

import Label from 'teaset/components/Label/Label';

复制代码

运行示例程序

从 github clone teaset 工程 (或者下载 zip 文件):

git clone https://github.com/rilyu/teaset.git
cd teaset/example
npm install

复制代码

在 iOS 下运行:

cd ios && pod install && cd ..
react-native run-ios

复制代码

在 Android 下运行:

react-native run-android

复制代码

动画流畅度

在使用 debug 模式运行, 特别是在 Android 设备上运行时, 部分动画效果不太流畅, 有时会有卡顿现象, 这是由于 debug 模式下有日志输出、远程调试等操作比较耗时导致, 在 release 模式下运行完全没有问题。

iPhoneX

从 0.6.0 开始全面支持 iPhoneX 、 iPhoneXS ，且默认打开自动适配开关。

如使用了 SafeAreaView 请使用 Theme.set({fitIPhoneX: false})手动关闭。

Redux

如果你使用了 Redux ，需要使用 <TopView>包裹 container ，用于给 Overlay 类型的组件提供容器 (感谢 @Alexorz 的贡献)。

import { TopView } from 'teaset';

container => () => <Provider store={store}><TopView>{container}</TopView></Provider>

复制代码

文档

中文文档已编写完成, 暂时没时间编写英文文档, 如果你乐意为 Teaset 贡献力量, 欢迎 PR。

主题

{Theme} 主题

基础组件

<Label /> 标签

<Button /> 按钮

<Checkbox /> 复选框

<Input /> 输入框

<Select /> 选择框

<Stepper /> 步进器

<SearchInput /> 搜索输入框

<Badge /> 徽章

<Popover /> 气泡

复合组件

<NavigationBar /> 导航栏

<ListRow /> 列表行

<Carousel /> 走马灯

<Projector /> 幻灯机

<SegmentedBar /> 分段工具条

<SegmentedView /> 分段器

<TabView /> 标签页

<TransformView /> 可变视图

<AlbumView /> 相册视图

<Wheel /> 滚轮

浮层

Overlay{} 浮层

Toast{} 轻提示

ActionSheet{} 操作选单

ActionPopover{} 操作气泡

PullPicker{} 上拉选择器

PopoverPicker{} 气泡选择器

Menu{} 菜单

Drawer{} 抽屉

ModalIndicator{} 模态指示器

页面

<TeaNavigator /> 导航器

<BasePage /> 基础页面

<NavigationPage /> 导航页面

License

MIT