@pluve/taro-one

Taro One

前言

基于 Taro 框架开发的 React 版本的多端 UI 组件库

文档

Taro One 正处于开发阶段，可能会出现重大改动，请谨慎使用。

特性

• 基于 Taro 开发的 UI 组件
• 微信小程序 / H5 多端适配运行（支付宝小程序 / 百度小程序 / 字节跳动小程序 端未测试，ReactNative 端暂不支持）
• 支持按需引入
• 支持 Typescript

安装

# 使用 npm
npm i @pluve/taro-one

# 使用 yarn
yarn add @pluve/taro-one

使用

按需加载

// babel.config.js
module.exports = {
  presets: [
    // ...
  ],
  plugins: [
    [
      'import',
      {
        libraryName: '@pluve/taro-one',
        libraryDirectory: 'lib/components',
        style: false,
        camel2DashComponentName: true,
        // 此操作可提高 H5 平台的兼容性，建议配置
        customName:
          process.env.TARO_ENV === 'h5'
            ? (name) => {
                if (['view', 'text', 'image', 'input', 'transition'].includes(name)) {
                  return `@pluve/taro-one/lib/components/${name}/index.h5`;
                }
                return `@pluve/taro-one/lib/components/${name}`;
              }
            : undefined,
      },
      'taro-one',
    ],
  ],
};

// app.tsx
import React, { PureComponent } from 'react';
import '@pluve/taro-one/dist/style/index.scss';

export default class App extends PureComponent {
  public render() {
    return this.props.children;
  }
}

// 页面使用组件
import React from 'react';
import { Button } from '@pluve/taro-one';

export default () => <Button type="primary">按钮</Button>;