@gm-mobile/react

简介

@gm-mobile/react 是一套完整的移动端 React 组件库，提供了 50+ 个高质量组件，涵盖表单、布局、浮层、基础组件和数据展示等多个分类。

安装

npm install @gm-mobile/react
# 或
yarn add @gm-mobile/react

包含的组件

表单组件（12个）

Button & ButtonTime

按钮组件，支持多种样式和自动 loading 处理。

• 详细文档: Button README

Input, InputPassword & BorderInput

输入框组件系列，支持普通输入、密码输入和带字符计数的输入框。

• 详细文档: Input README

Checkbox

复选框组件，支持多选。

• 详细文档: Checkbox README

Radio

单选框组件。

• 详细文档: Radio README

Textarea

多行文本输入组件。

• 详细文档: Textarea README

Switch

开关组件。

• 详细文档: Switch README

Picker (6个变体)

选择器组件系列，支持多种选择场景。

• 详细文档: Picker README

Calendar (3个变体)

日历组件系列，支持单选、多选和范围选择。

• 详细文档: Calendar README

Keyboard (3个变体)

数字键盘组件系列。

• 详细文档: Keyboard README

Counter

计数器组件。

• 详细文档: Counter README

Uploader

文件上传组件。

• 详细文档: Uploader README

Cell (4个变体)

单元格组件系列。

• 详细文档: Cell README

布局组件（8个）

Flex

弹性布局容器。

• 详细文档: Flex README

Divider

分割线组件。

• 详细文档: Divider README

List

列表组件。

• 详细文档: List README

Page

页面容器组件。

• 详细文档: Page README

Header

页面头部组件。

• 详细文档: Header README

Panel

面板容器组件。

• 详细文档: Panel README

Square

正方形容器组件。

• 详细文档: Square README

LayoutRoot

布局根容器，管理所有浮层组件。

• 详细文档: LayoutRoot README

浮层组件（8个）

Dialog (4个静态方法)

对话框组件，支持 Alert、Confirm、Prompt、Delete。

• 详细文档: Dialog README

Popup

弹出层组件。

• 详细文档: Popup README

ActionSheet

动作面板组件。

• 详细文档: ActionSheet README

Toast (7个静态方法)

提示组件，支持多种提示类型。

• 详细文档: Toast README

Mask

遮罩层组件。

• 详细文档: Mask README

InnerLayer

内页容器组件。

• 详细文档: InnerLayer README

Tooltip

提示框组件。

• 详细文档: Tooltip README

基础组件（7个）

Loading

加载组件。

• 详细文档: Loading README

Image

图片组件，支持自动重试。

• 详细文档: Image README

Badge

徽章组件。

• 详细文档: Badge README

Label

标签组件。

• 详细文档: Label README

Tag

标签包裹器组件。

• 详细文档: Tag README

ProgressBar

进度条组件。

• 详细文档: ProgressBar README

Price

价格显示组件。

• 详细文档: Price README

数据展示组件（10个）

Tabs

标签页组件。

• 详细文档: Tabs README

Tabbar (2个变体)

底部导航组件。

• 详细文档: Tabbar README

Nav

导航组件。

• 详细文档: Nav README

Lazy (2个变体)

懒加载组件。

• 详细文档: Lazy README

Scroll

滚动列表组件。

• 详细文档: Scroll README

PullUpDown

下拉刷新上拉加载组件。

• 详细文档: PullUpDown README

LetterIndex (2个变体)

字母索引组件。

• 详细文档: LetterIndex README

FlipNumber

翻牌数字组件。

• 详细文档: FlipNumber README

NProgress

进度条组件。

• 详细文档: NProgress README

Slider (3个变体)

轮播组件系列。

• 详细文档: Slider README
• 详细文档: SliderFlag README
• 详细文档: SliderLess README

其他组件（5个）

Search (3个变体)

搜索组件系列。

• 详细文档: Search README

ScrollIntoView

滚动到可视区域组件。

• 详细文档: ScrollIntoView README

RepeatTimes

连续点击触发器。

• 详细文档: RepeatTimes README

Canvas

画布组件。

• 详细文档: Canvas README

Storage (2个变体)

本地存储组件。

• 详细文档: Storage README

快速开始

import { Button, Input, Dialog } from '@gm-mobile/react'

// 使用按钮
<Button type="primary" onClick={() => console.log('点击')}>
  点击我
</Button>

// 使用输入框
<Input
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="请输入内容"
/>

// 使用对话框
Dialog.alert({
  title: '提示',
  content: '操作成功',
})

开发依赖

• React: ^16.13.1
• React-DOM: ^16.13.1
• @gm-common/number: ^2.2.9
• @gm-common/tool: ^2.2.9
• @gm-mobile/locales: ^1.1.11
• classnames: ^2.2.6

相关包

• @gm-mobile/business - 业务组件库
• @gm-mobile/swiper - 轮播组件库
• @gm-mobile/service_time - 服务时间组件库

文档导航

• 组件列表
• 快速开始
• 各组件详细文档

许可证

ISC

版本: v1.1.12 组件数量: 50+ 最后更新: 2026-03-27