react native ant design

按需加载#

  • 使用 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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,560评论 4赞 361
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,104评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,297评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,869评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,275评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,563评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,833评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,543评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,245评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,359评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,006评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2赞 273
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2赞 268