按需加载#

• 使用 babel-plugin-import（推荐）。

  // .babelrc or babel-loader option
  {
    "plugins": [
      ["import", { libraryName: "@ant-design/react-native" }] // 与 Web 平台的区别是不需要设置 style
    ]
  }
  

  然后改变从 @ant-design/react-native 引入模块方式即可。

  import { Button } from '@ant-design/react-native';
  

Layout

Flex

image.png image.png

WingBlank

image.png

WhiteSpace

image.png

Drawer

Drawer is a panel that displays the app's navigation options on the left edge of the screen.

image.png

Popover 气泡

在点击控件或者某个区域后，浮出一个气泡菜单来做更多的操作。 如果设置了遮罩层，建议通过点击遮罩层的任一位置，进行退出。

image.png

Pagination 分页器

分隔长列表，每次只加载一个页面。

image.png

SegmentedControl 分段器

由至少 2 个分段控件组成，用作不同视图的显示；是 iOS 的推荐组件。

规则

• 和 Tabs 功能相似，尽可能避免一个页面中同时出现这两个组件。

• 可以搭配 NavBar 一起使用，用于显示多个视图，分段数一般为 2 个。

• 单独放置一行时，分段数最多为 5 个；文案需要精简，一般 2-4 个字。

• 尽可能保持文案长度一致。

  
  image.png

Tabs 标签页

用于让用户在不同的视图中进行切换。

规则#

• 标签数量，一般 2-4 个；其中，标签中的文案需要精简，一般 2-4 个字。

• 在 iOS 端的次级页面中，不建议使用左右滑动来切换 Tab，这个和 iOS 的左滑返回存在冲突，eg：详情页中 Tabs。

image.png

TabBar 标签栏

位于 APP 底部，方便用户在不同功能模块之间进行快速切换。

规则#

• 用作 APP 的一级分类，数量控制在 3-5 个之间。

• 即使某个 Tab 不可用，也不要禁用或者移除该 Tab。

• 使用 Badge 进行提示，足不出户也能知道有内容更新。

image.png

Button 按钮

点击后会触发一个操作。

image.png

Checkbox 复选框

复选框

image.png

DatePickerView 选择器

DatePickerView 的功能类似于 DatePicker ，但它是直接渲染在区域中，而不是弹出窗口。

image.png

DatePicker 日期选择

用于选择日期或者时间。

规则#

• 最多展示 5 个独立滚轮，每个滚轮表示一个不同的值。

  
  image.png

image.png

InputItem 文本输入

用于接受单行文本。

规则#

• 支持通过键盘或者剪切板输入文本。

• 通过光标可以在水平方向进行移动。

• 对特定格式的文本进行处理，eg：隐藏密码。

image.png
image.png

ImagePicker 图片选择器

注意：只是图片选择器，一般用于上传图片前的文件选择操作，但不包括图片上传的功能

权限相关的问题可以移步至：https://github.com/ant-design/ant-design-mobile-rn/issues/90 查看

PickerView 选择器

PickerView 的功能类似于 Picker ，但它是直接渲染在区域中，而不是弹出窗口。

image.png

Picker 选择器

在一组预设数据中进行选择，e.g. 省市区选择。

规则#

• 尽量使用 Picker 来帮助用户完成输入，避免用户通过键盘直接输入。

• DatePicker 是 Picker 的特定模式。

  
  image.png
  image.png

Radio

image.png

Switch 滑动开关

在两个互斥对象进行选择，eg：选择开或关。

规则#

• 只在 List 中使用。

• 避免增加额外的文案来描述当前 Switch 的值。

image.png

Stepper 步进器

用作增加或者减少当前数值。

规则#

• 当想要对数值进行小幅度调整时，可以使用 Stepper，eg：将年化收益从 4.00% 调整到 4.05%。

image.png

Slider 滑动输入条

允许用户在一个区间中选择特定值，eg：控制屏幕的显示亮度。

规则#

• 默认状态下，左边为最小值，右边为最大值。

• 一般水平放置。

  
  image.png

SearchBar 搜索栏

一般可位于 NavBar 下方，通过『取消按钮』退出激活状态。

规则#

• 应该在 placeholder 里提供提示文字，提醒用户输入相关内容，比如：双11特卖。

• 在搜索栏下方，可提供有用的标签文案，帮助用户通过点击直接完成输入，比如：列出一些最近搜索的关键词。

image.png

TextareaItem 多行输入

用于接受多行文本。

规则#

• 支持通过键盘或者剪切板输入文本。

• 通过光标可以在垂直或者水平方向进行移动。

  
  image.png

Badge 徽标数

图标右上角的红点、数字或者文字。用于告知用户，该区域的状态变化或者待处理任务的数量。

规则#

• 当用户只需知道大致有内容更新时，应该使用红点型，如：社交中的群消息通知。

• 当用户有必要知晓每条更新时，应该使用数字型。如：社交中的一对一的消息通知。

  
  image.png

Accordion 手风琴

可以折叠/展开的内容区域。

规则#

• 对复杂区域进行分组和隐藏。

• 通常，一次只允许单个内容区域展开；特殊情况，多个内容区域可以同时展开。

  
  image.png

Carousel 走马灯

走马灯，轮播图

image.png

Grid 宫格

在水平和垂直方向，将布局切分成若干等大的区块。

规则#

• 区块中的内容应该是同类元素，eg：都是图片，或者都是图标+文字。

image.png

Card

image.png

List 列表

单个连续模块垂直排列，显示当前的内容、状态和可进行的操作。eg：联系人列表。

当你需要一个 infinite scroll 列表时，请使用 ListView。

规则#

• 一般由主要信息、主要操作、次要信息、次要操作组成。

• 主要信息和主要操作放在列表的左边，次要信息和次要操作放在列表的右边。

image.png image.png

Icon 图标

如何使用#

从3.0.0 开始使用 ant-design-icons 字体图标不需要单独安装但是需要link

更多信息请查看https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-react-native

安装完成后需要link字体文件

react-native link @ant-design/icons-react-native

使用方式：

<Icon name="account-book" size="md" color="red" />

注： 默认现在Icon使用了 ant-design-icons 里面的outline 图标

image.png

NoticeBar 通告栏

在导航栏下方，一般用作系统提醒、活动提醒等通知。

规则#

• 需要引起用户关注时使用，重要级别低于 Modal ，高于 Toast。

image.png

Tag 标签

进行标记和分类的小标签，用于标记事物的属性和维度，以及进行分类。

规则#

• 标签文字必须显示完全。

  
  image.png

Steps 步骤条

显示一个任务的进度；或者引导用户完成某个复杂任务。

规则#

• 应用在离散和时间较长的进度显示，eg：转账进度；如果任务是连续和短暂的，应该使用 Progress 来显示，eg：打开页面。

• 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务，eg：用户注册新账号。

  
  image.png

ActionSheet 动作面板

从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

规则#

• 提供清晰的退出按钮。

• 可高亮破坏性操作，e.g. 将『删除』处理成红色文本。

• 不要放置过多内容，避免面板纵向滚动。

  
  image.png

ActivityIndicator 活动指示器

活动指示器。 表明某个任务正在进行中。

规则#

• 不要让活动指示器静止，用户会以为该任务停滞了。

• 在某些特定场景下，提供有意义的文案，帮助用户明白哪个任务正在进行中，eg：正在上传照片。

• 如果能知道用户的等待时间，可以使用组件 Progress 来替代。

  
  image.png

Modal 对话框

如果需要使用Modal以及Toast还需要在 App 的入口处加上Provider， 用<Provider> 包裹 Toast

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Button, Provider, Toast } from '@ant-design/react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Provider>
        <Button onPress={() => Toast.info('This is a toast tips')}>
          Start
        </Button>
      </Provider>
    );
  }
}

用作显示系统的重要信息，并请求用户进行操作反馈，eg：删除某个重要内容时，弹出 Modal 进行二次确认。

规则#

• 尽可能少用。Modal 会打断用户操作，只用在重要的时候。

• 标题应该简明，不能超过 1 行；描述内容应该简明、完整，一般不多于 2 行。

• 操作按钮最多到 3 个（竖排），一般为 1-2 个（横排）；3 个以上建议使用组件 ActionSheet 来完成。

• 一般将用户最可能点击的按钮，放在右侧。另外，取消按钮应当始终放在左侧。

image.png

Progress 进度条

表明某个任务的当前进度。

规则#

• 需要准确告知当前进度，否则应该使用组件 ActivityIndicator。

• 和 NavBar 一起搭配使用时，可以隐藏 Progress 未填充部分的轨道，提升整体感。

  
  image.png

Toast 轻提示

一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。

规则#

• 一次只显示一个 toast。

• 有 Icon 的 Toast，字数为 4-6 个；没有 Icon 的 Toast，字数不宜超过 14 个。

image.png

Result 结果页

在整张页面中组织插画、图标、文字等内容，向用户反馈操作结果。

规则#

• 用作非常重要的操作反馈，如支付成功，无网络状态。

• 个性化且优美的插画，可以提升品牌形象。

• 对于错误类型的结果页，页面中需要提供明确的行动点，eg：重新加载。

Result 结果页

在整张页面中组织插画、图标、文字等内容，向用户反馈操作结果。

规则#

• 用作非常重要的操作反馈，如支付成功，无网络状态。

• 个性化且优美的插画，可以提升品牌形象。

• 对于错误类型的结果页，页面中需要提供明确的行动点，eg：重新加载。

  
  image.png

Provider 国际化和皮肤配置

为组件内建文案提供统一的国际化支持。

使用#

Provider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。

import enUS from '@ant-design/react-native/lib/locale-provider/en_US';

...

return <Provider locale={enUS}><App /></Provider>;

我们暂时只提供英语，中文两种语言支持（默认语言是中文），所有语言包可以在 这里 找到。

增加语言包#

如果你找不到你需要的语言包，欢迎你在 英文语言包 的基础上创建一个新的语言包，并给我们 Pull Request。

其他国际化需求#

本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用 react-intl，可参考示例：Intl demo 1 和 Intl demo 2。

image.png