From b6c0a141ba36e3fc2ec102c2f15d1bcc86d656da Mon Sep 17 00:00:00 2001
From: Wei Zhu <yesmeck@gmail.com>
Date: Thu, 2 Mar 2017 19:04:16 +0800
Subject: [PATCH] Run snapshots test againts demos

---
 .babelrc                                      |    2 +-
 .gitignore                                    |    1 +
 .jest.json                                    |   33 +
 .jest.web.json                                |   31 +
 .../__snapshots__/demo.test.web.js.snap       |  163 +
 .../accordion/__tests__/demo.test.web.js      |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  187 ++
 .../__snapshots__/demo.test.web.js.snap       |   44 +
 .../action-sheet/__tests__/demo.test.js       |    3 +
 .../action-sheet/__tests__/demo.test.web.js   |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  607 ++++
 .../__snapshots__/demo.test.web.js.snap       |  100 +
 .../activity-indicator/__tests__/demo.test.js |    3 +
 .../__tests__/demo.test.web.js                |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  475 +++
 .../__snapshots__/demo.test.web.js.snap       |  306 ++
 components/badge/__tests__/demo.test.js       |    3 +
 components/badge/__tests__/demo.test.web.js   |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  554 ++++
 .../__snapshots__/demo.test.web.js.snap       |  186 ++
 ...eb.test.js.snap => index.test.web.js.snap} |    0
 components/button/__tests__/demo.test.js      |    3 +
 components/button/__tests__/demo.test.web.js  |    3 +
 .../{index.web.test.js => index.test.web.js}  |    0
 .../__tests__/__snapshots__/demo.test.js.snap |  378 +++
 .../__snapshots__/demo.test.web.js.snap       |  114 +
 components/card/__tests__/demo.test.js        |    3 +
 components/card/__tests__/demo.test.web.js    |    3 +
 components/card/index.web.tsx                 |    6 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  428 +++
 .../__snapshots__/demo.test.web.js.snap       |  141 +
 components/carousel/__tests__/demo.test.js    |    3 +
 .../carousel/__tests__/demo.test.web.js       |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap | 1142 +++++++
 .../__snapshots__/demo.test.web.js.snap       |  187 ++
 components/checkbox/__tests__/demo.test.js    |    3 +
 .../checkbox/__tests__/demo.test.web.js       |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  169 +
 .../__snapshots__/demo.test.web.js.snap       |  160 +
 components/date-picker/__tests__/demo.test.js |    3 +
 .../date-picker/__tests__/demo.test.web.js    |    3 +
 .../__snapshots__/demo.test.web.js.snap       |  928 ++++++
 components/drawer/__tests__/demo.test.js      |    3 +
 components/drawer/__tests__/demo.test.web.js  |    3 +
 components/drawer/demo/basic.tsx              |    2 +
 .../__tests__/__snapshots__/demo.test.js.snap | 2604 +++++++++++++++
 .../__snapshots__/demo.test.web.js.snap       |  321 ++
 components/flex/__tests__/demo.test.js        |    3 +
 components/flex/__tests__/demo.test.web.js    |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap | 2308 +++++++++++++
 .../__snapshots__/demo.test.web.js.snap       |  768 +++++
 components/grid/__tests__/demo.test.js        |    3 +
 components/grid/__tests__/demo.test.web.js    |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap | 1477 +++++++++
 .../__snapshots__/demo.test.web.js.snap       |  479 +++
 components/icon/__tests__/demo.test.js        |    3 +
 components/icon/__tests__/demo.test.web.js    |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  647 ++++
 .../__snapshots__/demo.test.web.js.snap       |  111 +
 .../image-picker/__tests__/demo.test.js       |    3 +
 .../image-picker/__tests__/demo.test.web.js   |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap | 1332 ++++++++
 .../__snapshots__/demo.test.web.js.snap       |  420 +++
 components/input-item/__tests__/demo.test.js  |    3 +
 .../input-item/__tests__/demo.test.web.js     |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap | 2871 +++++++++++++++++
 .../__snapshots__/demo.test.web.js.snap       | 1022 ++++++
 components/list-view/__tests__/demo.test.js   |    3 +
 .../list-view/__tests__/demo.test.web.js      |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap | 1779 ++++++++++
 .../__snapshots__/demo.test.web.js.snap       |  644 ++++
 components/list/__tests__/demo.test.js        |    3 +
 components/list/__tests__/demo.test.web.js    |    3 +
 components/list/index.web.tsx                 |    2 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  543 ++++
 .../__snapshots__/demo.test.web.js.snap       |   99 +
 .../locale-provider/__tests__/demo.test.js    |    3 +
 .../__tests__/demo.test.web.js                |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |    7 +
 .../__snapshots__/demo.test.web.js.snap       |   42 +
 components/menu/__tests__/demo.test.js        |    3 +
 components/menu/__tests__/demo.test.web.js    |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  427 +++
 .../__snapshots__/demo.test.web.js.snap       |  164 +
 components/modal/__tests__/demo.test.js       |    3 +
 components/modal/__tests__/demo.test.web.js   |    3 +
 .../__snapshots__/demo.test.web.js.snap       |   54 +
 components/nav-bar/__tests__/demo.test.web.js |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  582 ++++
 .../__snapshots__/demo.test.web.js.snap       |  166 +
 components/notice-bar/__tests__/demo.test.js  |    3 +
 .../notice-bar/__tests__/demo.test.web.js     |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  735 +++++
 .../__snapshots__/demo.test.web.js.snap       |  182 ++
 components/pagination/__tests__/demo.test.js  |    3 +
 .../pagination/__tests__/demo.test.web.js     |    3 +
 .../__snapshots__/demo.test.web.js.snap       |   64 +
 .../picker-view/__tests__/demo.test.web.js    |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  176 +
 .../__snapshots__/demo.test.web.js.snap       |  130 +
 components/picker/__tests__/demo.test.js      |    3 +
 components/picker/__tests__/demo.test.web.js  |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  117 +
 .../__snapshots__/demo.test.web.js.snap       |   37 +
 components/popover/__tests__/demo.test.js     |    3 +
 components/popover/__tests__/demo.test.web.js |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  159 +
 .../__snapshots__/demo.test.web.js.snap       |   31 +
 components/popup/__tests__/demo.test.js       |    3 +
 components/popup/__tests__/demo.test.web.js   |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  206 ++
 .../__snapshots__/demo.test.web.js.snap       |   55 +
 components/progress/__tests__/demo.test.js    |    3 +
 .../progress/__tests__/demo.test.web.js       |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  663 ++++
 .../__snapshots__/demo.test.web.js.snap       |  373 +++
 components/radio/__tests__/demo.test.js       |    3 +
 components/radio/__tests__/demo.test.web.js   |    3 +
 .../__snapshots__/demo.test.web.js.snap       |  133 +
 components/range/__tests__/demo.test.web.js   |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  789 +++++
 .../__snapshots__/demo.test.web.js.snap       |  230 ++
 .../refresh-control/__tests__/demo.test.js    |    3 +
 .../__tests__/demo.test.web.js                |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  450 +++
 .../__snapshots__/demo.test.web.js.snap       |  181 ++
 components/result/__tests__/demo.test.js      |    3 +
 components/result/__tests__/demo.test.web.js  |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  155 +
 .../__snapshots__/demo.test.web.js.snap       |  222 ++
 components/search-bar/__tests__/demo.test.js  |    3 +
 .../search-bar/__tests__/demo.test.web.js     |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  158 +
 .../__snapshots__/demo.test.web.js.snap       |  171 +
 .../segmented-control/__tests__/demo.test.js  |    3 +
 .../__tests__/demo.test.web.js                |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  283 ++
 .../__snapshots__/demo.test.web.js.snap       |  230 ++
 components/slider/__tests__/demo.test.js      |    3 +
 components/slider/__tests__/demo.test.web.js  |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  722 +++++
 .../__snapshots__/demo.test.web.js.snap       |  140 +
 components/stepper/__tests__/demo.test.js     |    3 +
 components/stepper/__tests__/demo.test.web.js |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap | 1672 ++++++++++
 .../__snapshots__/demo.test.web.js.snap       | 1412 ++++++++
 components/steps/__tests__/demo.test.js       |    3 +
 components/steps/__tests__/demo.test.web.js   |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  200 ++
 .../__snapshots__/demo.test.web.js.snap       |  180 ++
 .../swipe-action/__tests__/demo.test.js       |    3 +
 .../swipe-action/__tests__/demo.test.web.js   |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  476 +++
 .../__snapshots__/demo.test.web.js.snap       |  137 +
 components/switch/__tests__/demo.test.js      |    3 +
 components/switch/__tests__/demo.test.web.js  |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  126 +
 .../__snapshots__/demo.test.web.js.snap       |  196 ++
 components/tab-bar/__tests__/demo.test.js     |    3 +
 components/tab-bar/__tests__/demo.test.web.js |    3 +
 .../__snapshots__/demo.test.web.js.snap       |  362 +++
 components/table/__tests__/demo.test.web.js   |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  318 ++
 .../__snapshots__/demo.test.web.js.snap       |  361 +++
 components/tabs/__tests__/demo.test.js        |    3 +
 components/tabs/__tests__/demo.test.web.js    |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  519 +++
 .../__snapshots__/demo.test.web.js.snap       |   74 +
 components/tag/__tests__/demo.test.js         |    3 +
 components/tag/__tests__/demo.test.web.js     |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  467 +++
 .../__snapshots__/demo.test.web.js.snap       |  357 ++
 .../textarea-item/__tests__/demo.test.js      |    3 +
 .../textarea-item/__tests__/demo.test.web.js  |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  539 ++++
 .../__snapshots__/demo.test.web.js.snap       |   77 +
 components/toast/__tests__/demo.test.js       |    3 +
 components/toast/__tests__/demo.test.web.js   |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  171 +
 .../__snapshots__/demo.test.web.js.snap       |   46 +
 components/white-space/__tests__/demo.test.js |    3 +
 .../white-space/__tests__/demo.test.web.js    |    3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  141 +
 .../__snapshots__/demo.test.web.js.snap       |   41 +
 components/wing-blank/__tests__/demo.test.js  |    3 +
 .../wing-blank/__tests__/demo.test.web.js     |    3 +
 package.json                                  |   34 +-
 rn-kitchen-sink/android/app/build.gradle      |    2 +-
 tests/imageStub.js                            |    1 +
 tests/setup.js                                |   57 +
 tests/shared/demoTest.js                      |   41 +
 191 files changed, 40244 insertions(+), 35 deletions(-)
 create mode 100644 .jest.json
 create mode 100644 .jest.web.json
 create mode 100644 components/accordion/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/accordion/__tests__/demo.test.web.js
 create mode 100644 components/action-sheet/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/action-sheet/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/action-sheet/__tests__/demo.test.js
 create mode 100644 components/action-sheet/__tests__/demo.test.web.js
 create mode 100644 components/activity-indicator/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/activity-indicator/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/activity-indicator/__tests__/demo.test.js
 create mode 100644 components/activity-indicator/__tests__/demo.test.web.js
 create mode 100644 components/badge/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/badge/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/badge/__tests__/demo.test.js
 create mode 100644 components/badge/__tests__/demo.test.web.js
 create mode 100644 components/button/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/button/__tests__/__snapshots__/demo.test.web.js.snap
 rename components/button/__tests__/__snapshots__/{index.web.test.js.snap => index.test.web.js.snap} (100%)
 create mode 100644 components/button/__tests__/demo.test.js
 create mode 100644 components/button/__tests__/demo.test.web.js
 rename components/button/__tests__/{index.web.test.js => index.test.web.js} (100%)
 create mode 100644 components/card/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/card/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/card/__tests__/demo.test.js
 create mode 100644 components/card/__tests__/demo.test.web.js
 create mode 100644 components/carousel/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/carousel/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/carousel/__tests__/demo.test.js
 create mode 100644 components/carousel/__tests__/demo.test.web.js
 create mode 100644 components/checkbox/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/checkbox/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/checkbox/__tests__/demo.test.js
 create mode 100644 components/checkbox/__tests__/demo.test.web.js
 create mode 100644 components/date-picker/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/date-picker/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/date-picker/__tests__/demo.test.js
 create mode 100644 components/date-picker/__tests__/demo.test.web.js
 create mode 100644 components/drawer/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/drawer/__tests__/demo.test.js
 create mode 100644 components/drawer/__tests__/demo.test.web.js
 create mode 100644 components/flex/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/flex/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/flex/__tests__/demo.test.js
 create mode 100644 components/flex/__tests__/demo.test.web.js
 create mode 100644 components/grid/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/grid/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/grid/__tests__/demo.test.js
 create mode 100644 components/grid/__tests__/demo.test.web.js
 create mode 100644 components/icon/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/icon/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/icon/__tests__/demo.test.js
 create mode 100644 components/icon/__tests__/demo.test.web.js
 create mode 100644 components/image-picker/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/image-picker/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/image-picker/__tests__/demo.test.js
 create mode 100644 components/image-picker/__tests__/demo.test.web.js
 create mode 100644 components/input-item/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/input-item/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/input-item/__tests__/demo.test.js
 create mode 100644 components/input-item/__tests__/demo.test.web.js
 create mode 100644 components/list-view/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/list-view/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/list-view/__tests__/demo.test.js
 create mode 100644 components/list-view/__tests__/demo.test.web.js
 create mode 100644 components/list/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/list/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/list/__tests__/demo.test.js
 create mode 100644 components/list/__tests__/demo.test.web.js
 create mode 100644 components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/locale-provider/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/locale-provider/__tests__/demo.test.js
 create mode 100644 components/locale-provider/__tests__/demo.test.web.js
 create mode 100644 components/menu/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/menu/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/menu/__tests__/demo.test.js
 create mode 100644 components/menu/__tests__/demo.test.web.js
 create mode 100644 components/modal/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/modal/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/modal/__tests__/demo.test.js
 create mode 100644 components/modal/__tests__/demo.test.web.js
 create mode 100644 components/nav-bar/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/nav-bar/__tests__/demo.test.web.js
 create mode 100644 components/notice-bar/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/notice-bar/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/notice-bar/__tests__/demo.test.js
 create mode 100644 components/notice-bar/__tests__/demo.test.web.js
 create mode 100644 components/pagination/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/pagination/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/pagination/__tests__/demo.test.js
 create mode 100644 components/pagination/__tests__/demo.test.web.js
 create mode 100644 components/picker-view/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/picker-view/__tests__/demo.test.web.js
 create mode 100644 components/picker/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/picker/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/picker/__tests__/demo.test.js
 create mode 100644 components/picker/__tests__/demo.test.web.js
 create mode 100644 components/popover/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/popover/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/popover/__tests__/demo.test.js
 create mode 100644 components/popover/__tests__/demo.test.web.js
 create mode 100644 components/popup/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/popup/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/popup/__tests__/demo.test.js
 create mode 100644 components/popup/__tests__/demo.test.web.js
 create mode 100644 components/progress/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/progress/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/progress/__tests__/demo.test.js
 create mode 100644 components/progress/__tests__/demo.test.web.js
 create mode 100644 components/radio/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/radio/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/radio/__tests__/demo.test.js
 create mode 100644 components/radio/__tests__/demo.test.web.js
 create mode 100644 components/range/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/range/__tests__/demo.test.web.js
 create mode 100644 components/refresh-control/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/refresh-control/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/refresh-control/__tests__/demo.test.js
 create mode 100644 components/refresh-control/__tests__/demo.test.web.js
 create mode 100644 components/result/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/result/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/result/__tests__/demo.test.js
 create mode 100644 components/result/__tests__/demo.test.web.js
 create mode 100644 components/search-bar/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/search-bar/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/search-bar/__tests__/demo.test.js
 create mode 100644 components/search-bar/__tests__/demo.test.web.js
 create mode 100644 components/segmented-control/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/segmented-control/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/segmented-control/__tests__/demo.test.js
 create mode 100644 components/segmented-control/__tests__/demo.test.web.js
 create mode 100644 components/slider/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/slider/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/slider/__tests__/demo.test.js
 create mode 100644 components/slider/__tests__/demo.test.web.js
 create mode 100644 components/stepper/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/stepper/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/stepper/__tests__/demo.test.js
 create mode 100644 components/stepper/__tests__/demo.test.web.js
 create mode 100644 components/steps/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/steps/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/steps/__tests__/demo.test.js
 create mode 100644 components/steps/__tests__/demo.test.web.js
 create mode 100644 components/swipe-action/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/swipe-action/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/swipe-action/__tests__/demo.test.js
 create mode 100644 components/swipe-action/__tests__/demo.test.web.js
 create mode 100644 components/switch/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/switch/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/switch/__tests__/demo.test.js
 create mode 100644 components/switch/__tests__/demo.test.web.js
 create mode 100644 components/tab-bar/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/tab-bar/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/tab-bar/__tests__/demo.test.js
 create mode 100644 components/tab-bar/__tests__/demo.test.web.js
 create mode 100644 components/table/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/table/__tests__/demo.test.web.js
 create mode 100644 components/tabs/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/tabs/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/tabs/__tests__/demo.test.js
 create mode 100644 components/tabs/__tests__/demo.test.web.js
 create mode 100644 components/tag/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/tag/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/tag/__tests__/demo.test.js
 create mode 100644 components/tag/__tests__/demo.test.web.js
 create mode 100644 components/textarea-item/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/textarea-item/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/textarea-item/__tests__/demo.test.js
 create mode 100644 components/textarea-item/__tests__/demo.test.web.js
 create mode 100644 components/toast/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/toast/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/toast/__tests__/demo.test.js
 create mode 100644 components/toast/__tests__/demo.test.web.js
 create mode 100644 components/white-space/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/white-space/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/white-space/__tests__/demo.test.js
 create mode 100644 components/white-space/__tests__/demo.test.web.js
 create mode 100644 components/wing-blank/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/wing-blank/__tests__/__snapshots__/demo.test.web.js.snap
 create mode 100644 components/wing-blank/__tests__/demo.test.js
 create mode 100644 components/wing-blank/__tests__/demo.test.web.js
 create mode 100644 tests/imageStub.js
 create mode 100644 tests/setup.js
 create mode 100644 tests/shared/demoTest.js

diff --git a/.babelrc b/.babelrc
index f8d168a017d..c1d070078db 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["react-native"],
-  "plugins": [["import", { "libraryName": "antd-mobile", "libraryDirectory": "components" }]]
+  "plugins": [["import", { "libraryName": "antd-mobile", "libraryDirectory": "../../../../components" }]]
 }
diff --git a/.gitignore b/.gitignore
index c8cb4aed016..ecfa728ea20 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,3 +44,4 @@ my-release-key.keystore
 yarn.lock
 npm-debug.log*
 !components/**/__tests__/*.js
+coverage
diff --git a/.jest.json b/.jest.json
new file mode 100644
index 00000000000..45b95714c58
--- /dev/null
+++ b/.jest.json
@@ -0,0 +1,33 @@
+{
+  "preset": "react-native",
+  "setupFiles": [
+    "./tests/setup.js"
+  ],
+  "moduleFileExtensions": [
+    "ts",
+    "tsx",
+    "js",
+    "jsx",
+    "json",
+    "md"
+  ],
+  "moduleNameMapper": {
+    "\\.png": "<rootDir>/tests/imageStub.js"
+  },
+  "testPathIgnorePatterns": [
+    "/node_modules/",
+    "_site",
+    "site"
+  ],
+  "transform": {
+    "\\.tsx?$": "./node_modules/typescript-babel-jest",
+      "\\.js$": "./node_modules/babel-jest",
+      "\\.md$": "./node_modules/antd-demo-jest/mobile"
+  },
+  "testRegex": ".*\\.test\\.js$",
+  "collectCoverageFrom": [
+    "components/**/*.{ts,tsx}",
+    "!components/*/style/index.tsx"
+  ],
+  "testEnvironment": "jsdom"
+}
diff --git a/.jest.web.json b/.jest.web.json
new file mode 100644
index 00000000000..0be2b2f25b5
--- /dev/null
+++ b/.jest.web.json
@@ -0,0 +1,31 @@
+{
+  "moduleFileExtensions": [
+    "web.tsx",
+    "web.js",
+    "ts",
+    "tsx",
+    "js",
+    "jsx",
+    "json",
+    "md"
+  ],
+  "moduleNameMapper": {
+    "\\.svg$": "<rootDir>/tests/imageStub.js"
+  },
+  "testPathIgnorePatterns": [
+    "/node_modules/",
+    "_site",
+    "site"
+  ],
+  "transform": {
+    "\\.tsx?$": "./node_modules/typescript-babel-jest",
+      "\\.js$": "./node_modules/babel-jest",
+      "\\.md$": "./node_modules/antd-demo-jest/mobile"
+  },
+  "testRegex": ".*\\.test\\.web\\.js$",
+  "collectCoverageFrom": [
+    "components/**/*.{ts,tsx}",
+    "!components/*/style/index.tsx"
+  ],
+  "testEnvironment": "jsdom"
+}
diff --git a/components/accordion/__tests__/__snapshots__/demo.test.web.js.snap b/components/accordion/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..3dc4f9e18ae
--- /dev/null
+++ b/components/accordion/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/accordion/demo/accordion.md correctly 1`] = `
+<div
+  style="margin-top:10px;margin-bottom:10px;"
+>
+  <div
+    class="am-accordion my-accordion"
+  >
+    <div
+      class="am-accordion-item"
+    >
+      <div
+        aria-expanded="false"
+        class="am-accordion-header"
+        role="tab"
+      >
+        <i
+          class="arrow"
+        />
+        标题一
+      </div>
+    </div>
+    <div
+      class="am-accordion-item pad"
+    >
+      <div
+        aria-expanded="false"
+        class="am-accordion-header"
+        role="tab"
+      >
+        <i
+          class="arrow"
+        />
+        标题二
+      </div>
+    </div>
+    <div
+      class="am-accordion-item pad"
+    >
+      <div
+        aria-expanded="false"
+        class="am-accordion-header"
+        role="tab"
+      >
+        <i
+          class="arrow"
+        />
+        标题三
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/accordion/demo/basic.md correctly 1`] = `
+<div
+  style="margin-top:10px;margin-bottom:10px;"
+>
+  <div
+    class="am-accordion my-accordion"
+  >
+    <div
+      class="am-accordion-item am-accordion-item-active"
+    >
+      <div
+        aria-expanded="true"
+        class="am-accordion-header"
+        role="tab"
+      >
+        <i
+          class="arrow"
+        />
+        标题一
+      </div>
+      <div
+        class="am-accordion-content am-accordion-content-active"
+        role="tabpanel"
+      >
+        <div
+          class="am-accordion-content-box"
+        >
+          <div
+            class="am-list my-list"
+          >
+            <div
+              class="am-list-body"
+            >
+              <div
+                class="am-list-item am-list-item-middle"
+              >
+                <div
+                  class="am-list-line"
+                >
+                  <div
+                    class="am-list-content"
+                  >
+                    子内容一
+                  </div>
+                </div>
+              </div>
+              <div
+                class="am-list-item am-list-item-middle"
+              >
+                <div
+                  class="am-list-line"
+                >
+                  <div
+                    class="am-list-content"
+                  >
+                    子内容二
+                  </div>
+                </div>
+              </div>
+              <div
+                class="am-list-item am-list-item-middle"
+              >
+                <div
+                  class="am-list-line"
+                >
+                  <div
+                    class="am-list-content"
+                  >
+                    子内容三
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-accordion-item pad"
+    >
+      <div
+        aria-expanded="false"
+        class="am-accordion-header"
+        role="tab"
+      >
+        <i
+          class="arrow"
+        />
+        标题二
+      </div>
+    </div>
+    <div
+      class="am-accordion-item pad"
+    >
+      <div
+        aria-expanded="false"
+        class="am-accordion-header"
+        role="tab"
+      >
+        <i
+          class="arrow"
+        />
+        标题三
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/accordion/__tests__/demo.test.web.js b/components/accordion/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..87c9bfba742
--- /dev/null
+++ b/components/accordion/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('accordion');
diff --git a/components/action-sheet/__tests__/__snapshots__/demo.test.js.snap b/components/action-sheet/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..69a8bc6385c
--- /dev/null
+++ b/components/action-sheet/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,187 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/action-sheet/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "marginTop": 30,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "padding": 8,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#ddd",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#000",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        默认状态操作列表
+      </Text>
+    </View>
+  </View>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "padding": 8,
+        },
+      ]
+    }
+  >
+    点击过的按钮: 
+    none
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "padding": 8,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#ddd",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#000",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        带分享功能的操作列表
+      </Text>
+    </View>
+  </View>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "padding": 8,
+        },
+      ]
+    }
+  >
+    
+  </Text>
+</View>
+`;
diff --git a/components/action-sheet/__tests__/__snapshots__/demo.test.web.js.snap b/components/action-sheet/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..26955bab0e0
--- /dev/null
+++ b/components/action-sheet/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/action-sheet/demo/basic.md correctly 1`] = `
+<div
+  class="actionSheetContainer"
+>
+  <div
+    style="margin:0.15rem 0;"
+  >
+    <a
+      class="am-button"
+      role="button"
+    >
+      <span>
+        默认状态
+      </span>
+    </a>
+  </div>
+  <div
+    style="margin:0.15rem 0;"
+  >
+    <a
+      class="am-button"
+      role="button"
+    >
+      <span>
+        分享功能
+      </span>
+    </a>
+  </div>
+  <div
+    style="margin:0.15rem 0;"
+  >
+    <a
+      class="am-button"
+      role="button"
+    >
+      <span>
+        带多行按钮的分享功能
+      </span>
+    </a>
+  </div>
+</div>
+`;
diff --git a/components/action-sheet/__tests__/demo.test.js b/components/action-sheet/__tests__/demo.test.js
new file mode 100644
index 00000000000..3c65c08c9cf
--- /dev/null
+++ b/components/action-sheet/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('action-sheet');
diff --git a/components/action-sheet/__tests__/demo.test.web.js b/components/action-sheet/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..2f43b2e1dab
--- /dev/null
+++ b/components/action-sheet/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('action-sheet');
diff --git a/components/activity-indicator/__tests__/__snapshots__/demo.test.js.snap b/components/activity-indicator/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..44a97354d5d
--- /dev/null
+++ b/components/activity-indicator/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,607 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/activity-indicator/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginTop": 20,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+        >
+          Icon无文案
+        </Text>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            }
+          }
+        >
+          <ActivityIndicator
+            animating={true}
+            color="gray"
+            hidesWhenStopped={true}
+            size="small"
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 21,
+        },
+        Object {
+          "backgroundColor": "#fff",
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+        >
+          Icon带文案
+        </Text>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            }
+          }
+        >
+          <ActivityIndicator
+            animating={true}
+            color="gray"
+            hidesWhenStopped={true}
+            size="small"
+          />
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#999",
+                  "fontSize": 14,
+                  "marginLeft": 8,
+                },
+              ]
+            }
+          >
+            正在加载...
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 21,
+        },
+        Object {
+          "backgroundColor": "#fff",
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+        >
+          深色背景
+        </Text>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#2B2F42",
+                "height": 89,
+                "justifyContent": "center",
+                "width": 89,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              }
+            }
+          >
+            <ActivityIndicator
+              animating={true}
+              color="#fff"
+              hidesWhenStopped={true}
+              size="small"
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 21,
+        },
+        Object {
+          "backgroundColor": "#fff",
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+        >
+          大号icon
+        </Text>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            }
+          }
+        >
+          <ActivityIndicator
+            animating={true}
+            color="gray"
+            hidesWhenStopped={true}
+            size="large"
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 21,
+        },
+        Object {
+          "backgroundColor": "#fff",
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#ddd",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#000",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        点击显示 Toast
+      </Text>
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/activity-indicator/__tests__/__snapshots__/demo.test.web.js.snap b/components/activity-indicator/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..18e3ef558ce
--- /dev/null
+++ b/components/activity-indicator/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/activity-indicator/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <div
+      class="loading-container"
+    >
+      <p
+        class="sub-title"
+      >
+        icon无文案
+      </p>
+      <div
+        class="loading-example"
+      >
+        <div
+          class="am-activity-indicator am-activity-indicator-sm"
+        >
+          <span
+            class="am-activity-indicator-spinner"
+          />
+        </div>
+      </div>
+      <div
+        class="am-whitespace am-whitespace-xl"
+      />
+      <p
+        class="sub-title"
+      >
+        icon带文案
+      </p>
+      <div
+        class="loading-example"
+      >
+        <div
+          class="am-activity-indicator am-activity-indicator-sm"
+        >
+          <span
+            class="am-activity-indicator-spinner"
+          />
+          <span
+            class="am-activity-indicator-tip"
+          >
+            加载中...
+          </span>
+        </div>
+      </div>
+      <div
+        class="am-whitespace am-whitespace-xl"
+      />
+      <p
+        class="sub-title"
+      >
+        大号icon，自定义文案样式
+      </p>
+      <div
+        class="loading-example"
+      >
+        <div
+          class="align"
+        >
+          <div
+            class="am-activity-indicator am-activity-indicator-lg"
+          >
+            <span
+              class="am-activity-indicator-spinner am-activity-indicator-spinner-lg"
+            />
+          </div>
+          <span
+            style="margin-top:8px;"
+          >
+            加载中...
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="toast-container"
+    >
+      <div
+        class="am-whitespace am-whitespace-xl"
+      />
+      <a
+        class="am-button"
+        role="button"
+      >
+        <span>
+          点击显示 Toast
+        </span>
+      </a>
+      <div
+        class="toast-example"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/activity-indicator/__tests__/demo.test.js b/components/activity-indicator/__tests__/demo.test.js
new file mode 100644
index 00000000000..496e45ecdf8
--- /dev/null
+++ b/components/activity-indicator/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('activity-indicator');
diff --git a/components/activity-indicator/__tests__/demo.test.web.js b/components/activity-indicator/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..2d0d85287cc
--- /dev/null
+++ b/components/activity-indicator/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('activity-indicator');
diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..7a49ecc9a47
--- /dev/null
+++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,475 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/badge/demo/basic.tsx correctly 1`] = `
+<ScrollView
+  automaticallyAdjustContentInsets={false}
+  showsHorizontalScrollIndicator={false}
+  showsVerticalScrollIndicator={false}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "padding": 20,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "backgroundColor": "rgba(255, 140, 101, 0.15)",
+              "height": 52,
+              "width": 52,
+            }
+          }
+        />
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ff5b05",
+                "borderRadius": 12,
+                "borderStyle": "solid",
+                "paddingHorizontal": 6,
+                "paddingVertical": 2,
+                "position": "absolute",
+                "right": -15,
+                "top": -10,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#fff",
+                  "textAlign": "center",
+                },
+              ]
+            }
+          >
+            9
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "backgroundColor": "rgba(255, 140, 101, 0.15)",
+              "height": 52,
+              "width": 52,
+            }
+          }
+        />
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ff5b05",
+                "borderRadius": 12,
+                "borderStyle": "solid",
+                "paddingHorizontal": 6,
+                "paddingVertical": 2,
+                "position": "absolute",
+                "right": -15,
+                "top": -10,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#fff",
+                  "textAlign": "center",
+                },
+              ]
+            }
+          >
+            100+
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "backgroundColor": "rgba(255, 140, 101, 0.15)",
+              "height": 52,
+              "width": 52,
+            }
+          }
+        />
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ff5b05",
+                "borderRadius": 12,
+                "borderStyle": "solid",
+                "paddingHorizontal": 6,
+                "paddingVertical": 2,
+                "position": "absolute",
+                "right": -15,
+                "top": -10,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#fff",
+                  "textAlign": "center",
+                },
+              ]
+            }
+          >
+            99+
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "backgroundColor": "rgba(255, 140, 101, 0.15)",
+              "height": 52,
+              "width": 52,
+            }
+          }
+        />
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ff5b05",
+                "borderRadius": 12,
+                "borderStyle": "solid",
+                "paddingHorizontal": 6,
+                "paddingVertical": 2,
+                "position": "absolute",
+                "right": -15,
+                "top": -10,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#fff",
+                  "textAlign": "center",
+                },
+              ]
+            }
+          >
+            new
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "backgroundColor": "rgba(255, 140, 101, 0.15)",
+              "height": 52,
+              "width": 52,
+            }
+          }
+        />
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ff5b05",
+                "borderRadius": 4,
+                "height": 8,
+                "position": "absolute",
+                "right": -4,
+                "top": -4,
+                "width": 8,
+              },
+              undefined,
+            ]
+          }
+        />
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "overflow": "hidden",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "backgroundColor": "rgba(255, 140, 101, 0.15)",
+              "height": 52,
+              "width": 52,
+            }
+          }
+        />
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ff5b05",
+                "position": "absolute",
+                "top": 8,
+                "transform": Array [
+                  Object {
+                    "rotate": "45deg",
+                  },
+                ],
+                "width": 72,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#fff",
+                  "textAlign": "center",
+                },
+              ]
+            }
+          >
+            33
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</ScrollView>
+`;
diff --git a/components/badge/__tests__/__snapshots__/demo.test.web.js.snap b/components/badge/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..7af63a9398d
--- /dev/null
+++ b/components/badge/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,306 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
+<div
+  class="am-list"
+>
+  <div
+    class="am-list-header"
+  />
+  <div
+    class="am-list-body"
+  >
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          <span
+            class="am-badge"
+            title=""
+          >
+            <span
+              style="width:0.52rem;height:0.52rem;background:#ddd;display:inline-block;"
+            />
+            <sup
+              class="am-badge-dot"
+            >
+                
+            </sup>
+          </span>
+          <span
+            style="margin-left:12px;"
+          >
+            小圆点
+          </span>
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          内容内容
+        </div>
+        <div
+          class="am-list-arrow am-list-arrow-horizontal"
+        />
+      </div>
+    </div>
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-thumb"
+      >
+        <img
+          src="https://zos.alipayobjects.com/rmsportal/faMhXAxhCzLvveJ.png"
+        />
+      </div>
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          文本内容
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          <span
+            class="am-badge am-badge-not-a-wrapper"
+            title="77"
+          >
+            <sup
+              class="am-badge-text"
+            >
+               77 
+            </sup>
+          </span>
+        </div>
+        <div
+          class="am-list-arrow am-list-arrow-horizontal"
+        />
+      </div>
+    </div>
+    <div
+      class="special-badge am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          文本内容
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          <span
+            class="am-badge am-badge-not-a-wrapper"
+            title="促"
+          >
+            <sup
+              class="am-badge-text"
+            >
+               促 
+            </sup>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          文本内容
+          <span
+            class="am-badge am-badge-not-a-wrapper"
+            title="new"
+          >
+            <sup
+              class="am-badge-text"
+              style="margin-left:12px;"
+            >
+               new 
+            </sup>
+          </span>
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          内容内容
+        </div>
+        <div
+          class="am-list-arrow am-list-arrow-horizontal"
+        />
+      </div>
+    </div>
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          营销：
+          <span
+            class="am-badge am-badge-not-a-wrapper am-badge-hot"
+            title="减"
+          >
+            <sup
+              class="am-badge-text"
+              style="margin-left:12px;"
+            >
+               减 
+            </sup>
+          </span>
+          <span
+            class="am-badge am-badge-not-a-wrapper am-badge-hot"
+            title="惠"
+          >
+            <sup
+              class="am-badge-text"
+              style="margin-left:12px;"
+            >
+               惠 
+            </sup>
+          </span>
+          <span
+            class="am-badge am-badge-not-a-wrapper am-badge-hot"
+            title="免"
+          >
+            <sup
+              class="am-badge-text"
+              style="margin-left:12px;"
+            >
+               免 
+            </sup>
+          </span>
+          <span
+            class="am-badge am-badge-not-a-wrapper am-badge-hot"
+            title="反"
+          >
+            <sup
+              class="am-badge-text"
+              style="margin-left:12px;"
+            >
+               反 
+            </sup>
+          </span>
+          <span
+            class="am-badge am-badge-not-a-wrapper am-badge-hot"
+            title="HOT"
+          >
+            <sup
+              class="am-badge-text"
+              style="margin-left:12px;"
+            >
+               HOT 
+            </sup>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          自定义：
+          <span
+            class="am-badge am-badge-not-a-wrapper"
+            title="4"
+          >
+            <sup
+              class="am-badge-text"
+              style="margin-left:12px;"
+            >
+               4 
+            </sup>
+          </span>
+          <span
+            class="am-badge am-badge-not-a-wrapper"
+            title="券"
+          >
+            <sup
+              class="am-badge-text"
+              style="margin-left:12px;padding:0 0.06rem;background-color:#f19736;border-radius:2px;"
+            >
+               券 
+            </sup>
+          </span>
+          <span
+            class="am-badge am-badge-not-a-wrapper"
+            title="NEW"
+          >
+            <sup
+              class="am-badge-text"
+              style="margin-left:12px;padding:0 0.06rem;background-color:#21b68a;border-radius:2px;"
+            >
+               NEW 
+            </sup>
+          </span>
+          <span
+            class="am-badge am-badge-not-a-wrapper"
+            title="自动缴费"
+          >
+            <sup
+              class="am-badge-text"
+              style="margin-left:12px;padding:0 0.06rem;background-color:#fff;border-radius:2px;color:#f19736;border:1px solid #f19736;"
+            >
+               自动缴费 
+            </sup>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          超出99
+          <span
+            class="am-badge am-badge-not-a-wrapper"
+            title="99+"
+          >
+            <sup
+              class="am-badge-text"
+              style="margin-left:12px;"
+            >
+               99+ 
+            </sup>
+          </span>
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          内容内容
+        </div>
+        <div
+          class="am-list-arrow am-list-arrow-horizontal"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/badge/__tests__/demo.test.js b/components/badge/__tests__/demo.test.js
new file mode 100644
index 00000000000..f91e48230fb
--- /dev/null
+++ b/components/badge/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('badge');
diff --git a/components/badge/__tests__/demo.test.web.js b/components/badge/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..5205baad24d
--- /dev/null
+++ b/components/badge/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('badge');
diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..380623a3d11
--- /dev/null
+++ b/components/button/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,554 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/button/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "marginTop": 80,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#ddd",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#000",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        default button
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#108ee9",
+              "borderColor": "#108ee9",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#fff",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        primary button
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#f4333c",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#f4333c",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        warning button
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#ddd",
+            },
+            Object {
+              "backgroundColor": "#ddd",
+              "borderColor": "#ddd",
+            },
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#000",
+            },
+            Object {
+              "color": "#bbb",
+            },
+            false,
+          ]
+        }
+      >
+        disable button
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#ddd",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#000",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        无点击反馈
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#ddd",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#000",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        自定义点击反馈 style
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "marginTop": 20,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      小按钮
+    </Text>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 23,
+              "paddingLeft": 5,
+              "paddingRight": 5,
+            },
+            Object {
+              "backgroundColor": "transparent",
+              "borderColor": "#108ee9",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 12,
+            },
+            Object {
+              "color": "#108ee9",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        ghost small button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/button/__tests__/__snapshots__/demo.test.web.js.snap b/components/button/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..d8ab5bc0afc
--- /dev/null
+++ b/components/button/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/button/demo/basic.md correctly 1`] = `
+<div
+  class="am-wingblank am-wingblank-lg"
+>
+  <div
+    class="btn-container"
+  >
+    <div>
+      <a
+        class="btn am-button am-button-primary"
+        role="button"
+      >
+        <span>
+          primary 按钮
+        </span>
+      </a>
+      <a
+        class="btn am-button am-button-disabled"
+        role="button"
+      >
+        <span>
+          disabled 按钮
+        </span>
+      </a>
+      <a
+        class="btn am-button am-button-loading am-button-icon"
+        role="button"
+      >
+        <svg
+          class="am-icon am-icon-loading am-icon-md"
+        >
+          <use
+            xlink:href="#loading"
+          />
+        </svg>
+        <span>
+          loading 按钮
+        </span>
+      </a>
+      <a
+        class="btn am-button am-button-icon"
+        role="button"
+      >
+        <svg
+          class="am-icon am-icon-check-circle-o am-icon-md"
+        >
+          <use
+            xlink:href="#check-circle-o"
+          />
+        </svg>
+        <span>
+          带图标按钮
+        </span>
+      </a>
+      <a
+        class="btn am-button am-button-icon"
+        role="button"
+      >
+        <svg
+          class="am-icon am-icon-[object Object] am-icon-md"
+        >
+          <use
+            xlink:href="#[object Object]"
+          />
+        </svg>
+        <span>
+          本地图标
+        </span>
+      </a>
+      <div
+        style="height:0.16rem;"
+      />
+      <p
+        style="margin:30px 0 18px 0;color:#999;"
+      >
+        inline / small
+      </p>
+      <div
+        class="am-flexbox am-flexbox-align-middle"
+        style="margin-bottom:0.16rem;"
+      >
+        <a
+          class="am-button am-button-primary am-button-inline"
+          role="button"
+          style="margin-right:0.08rem;"
+        >
+          <span>
+            inline
+          </span>
+        </a>
+        <a
+          class="am-button am-button-ghost am-button-small am-button-inline"
+          role="button"
+          style="margin-right:0.08rem;"
+        >
+          <span>
+            inline small
+          </span>
+        </a>
+        <a
+          class="am-button am-button-primary am-button-small am-button-inline"
+          role="button"
+        >
+          <span>
+            inline small
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/button/demo/complex.md correctly 1`] = `
+<div
+  class="am-list"
+  style="margin:0.1rem 0;background-color:white;"
+>
+  <div
+    class="am-list-body"
+  >
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line am-list-line-multiple"
+      >
+        <div
+          class="am-list-content"
+        >
+          区域经理
+          <div
+            class="am-list-brief"
+          >
+            可进行收款、退款、折扣管理、查看数据等操作
+          </div>
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          <a
+            class="am-button am-button-ghost am-button-small am-button-inline"
+            role="button"
+          >
+            <span>
+              small
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line am-list-line-multiple"
+      >
+        <div
+          class="am-list-content"
+        >
+          区域经理
+          <div
+            class="am-list-brief"
+          >
+            可进行收款、退款、折扣管理、查看数据等操作
+          </div>
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          <a
+            class="am-button am-button-primary am-button-small am-button-inline"
+            role="button"
+          >
+            <span>
+              small
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/button/__tests__/__snapshots__/index.web.test.js.snap b/components/button/__tests__/__snapshots__/index.test.web.js.snap
similarity index 100%
rename from components/button/__tests__/__snapshots__/index.web.test.js.snap
rename to components/button/__tests__/__snapshots__/index.test.web.js.snap
diff --git a/components/button/__tests__/demo.test.js b/components/button/__tests__/demo.test.js
new file mode 100644
index 00000000000..f4ce50e43ab
--- /dev/null
+++ b/components/button/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('button');
diff --git a/components/button/__tests__/demo.test.web.js b/components/button/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..4d738aad259
--- /dev/null
+++ b/components/button/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('button');
diff --git a/components/button/__tests__/index.web.test.js b/components/button/__tests__/index.test.web.js
similarity index 100%
rename from components/button/__tests__/index.web.test.js
rename to components/button/__tests__/index.test.web.js
diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..e9eb8e64b13
--- /dev/null
+++ b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,378 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/card/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "paddingTop": 30,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "flexDirection": "column",
+            "paddingBottom": 6,
+          },
+          Object {},
+          Object {},
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "marginLeft": 15,
+              "paddingRight": 15,
+              "paddingVertical": 6,
+            },
+            Object {},
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "http://gravatar.com/avatar/e9c13fb979736b16033acbce4c710ca1.png?size=32",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "marginRight": 5,
+                },
+                Object {
+                  "height": 30,
+                  "width": 30,
+                },
+              ]
+            }
+          />
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "color": "#000",
+                "flex": 1,
+                "fontSize": 17,
+              }
+            }
+          >
+            这是 title
+          </Text>
+        </View>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#888",
+                "flex": 1,
+                "fontSize": 17,
+                "textAlign": "right",
+              },
+            ]
+          }
+        >
+          this is extra
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#ddd",
+              "borderTopWidth": 1,
+              "flexGrow": 1,
+              "minHeight": 48,
+              "paddingVertical": 9,
+            },
+            Object {},
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "height": 42,
+            }
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "marginLeft": 16,
+              }
+            }
+          >
+            这是卡片内容
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+              "paddingHorizontal": 15,
+            },
+            Object {},
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#888",
+              "flex": 1,
+              "fontSize": 14,
+            }
+          }
+        >
+          这是卡尾
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#888",
+                "fontSize": 14,
+                "textAlign": "right",
+              },
+            ]
+          }
+        >
+          这是尾部介绍
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#fff",
+          "borderColor": "#ddd",
+          "borderRadius": 5,
+          "borderWidth": 1,
+          "flexDirection": "column",
+          "paddingBottom": 6,
+        },
+        Object {
+          "borderLeftWidth": 0,
+          "borderRadius": 0,
+          "borderRightWidth": 0,
+        },
+        Object {},
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "marginLeft": 15,
+            "paddingRight": 15,
+            "paddingVertical": 6,
+          },
+          Object {},
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <Image
+          source={
+            Object {
+              "uri": "http://gravatar.com/avatar/e9c13fb979736b16033acbce4c710ca1.png?size=32",
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginRight": 5,
+              },
+              Object {
+                "height": 30,
+                "width": 30,
+              },
+            ]
+          }
+        />
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flex": 1,
+              "fontSize": 17,
+            }
+          }
+        >
+          这是 title
+        </Text>
+      </View>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "#888",
+              "flex": 1,
+              "fontSize": 17,
+              "textAlign": "right",
+            },
+          ]
+        }
+      >
+        this is extra
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#ddd",
+            "borderTopWidth": 1,
+            "flexGrow": 1,
+            "minHeight": 48,
+            "paddingVertical": 9,
+          },
+          Object {},
+        ]
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": 42,
+          }
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "marginLeft": 16,
+            }
+          }
+        >
+          这是卡片内容
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "paddingHorizontal": 15,
+          },
+          Object {},
+        ]
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "color": "#888",
+            "flex": 1,
+            "fontSize": 14,
+          }
+        }
+      >
+        这是卡尾
+      </Text>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "#888",
+              "fontSize": 14,
+              "textAlign": "right",
+            },
+          ]
+        }
+      >
+        这是尾部介绍
+      </Text>
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/card/__tests__/__snapshots__/demo.test.web.js.snap b/components/card/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..5fbabba1368
--- /dev/null
+++ b/components/card/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,114 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/card/demo/basic.md correctly 1`] = `
+<div
+  class="am-wingblank am-wingblank-lg"
+>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-card"
+  >
+    <div
+      class="am-card-header"
+    >
+      <div
+        class="am-card-header-content"
+      >
+        <img
+          src="https://cloud.githubusercontent.com/assets/1698185/18039916/f025c090-6dd9-11e6-9d86-a4d48a1bf049.png"
+        />
+        这是 title
+      </div>
+      <div
+        class="am-card-header-extra"
+      >
+        <span>
+          this is extra
+        </span>
+      </div>
+    </div>
+    <div
+      class="am-card-body"
+    >
+      <div>
+        这是卡片内容
+      </div>
+    </div>
+    <div
+      class="am-card-footer"
+    >
+      <div
+        class="am-card-footer-content"
+      >
+        这是卡尾
+      </div>
+      <div
+        class="am-card-footer-extra"
+      >
+        <div>
+          这是尾部介绍
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+</div>
+`;
+
+exports[`renders ./components/card/demo/full.md correctly 1`] = `
+<div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-card am-card-full"
+  >
+    <div
+      class="am-card-header"
+    >
+      <div
+        class="am-card-header-content"
+      >
+        <img
+          src="https://cloud.githubusercontent.com/assets/1698185/18039916/f025c090-6dd9-11e6-9d86-a4d48a1bf049.png"
+        />
+        这是 title
+      </div>
+      <div
+        class="am-card-header-extra"
+      >
+        <span>
+          this is extra
+        </span>
+      </div>
+    </div>
+    <div
+      class="am-card-body"
+    >
+      <div>
+        这是卡片内容
+      </div>
+    </div>
+    <div
+      class="am-card-footer"
+    >
+      <div
+        class="am-card-footer-content"
+      >
+        这是卡尾
+      </div>
+      <div
+        class="am-card-footer-extra"
+      >
+        <div>
+          这是尾部介绍
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/card/__tests__/demo.test.js b/components/card/__tests__/demo.test.js
new file mode 100644
index 00000000000..ba7c6b904e4
--- /dev/null
+++ b/components/card/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('card');
diff --git a/components/card/__tests__/demo.test.web.js b/components/card/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..a6b35401142
--- /dev/null
+++ b/components/card/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('card');
diff --git a/components/card/index.web.tsx b/components/card/index.web.tsx
index 07c76a3eeee..9feb56c4270 100644
--- a/components/card/index.web.tsx
+++ b/components/card/index.web.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
-import CardHeader from './CardHeader';
-import CardBody from './CardBody';
-import CardFooter from './CardFooter';
+import CardHeader from './CardHeader.web';
+import CardBody from './CardBody.web';
+import CardFooter from './CardFooter.web';
 
 export interface CardProps {
   prefixCls?: string;
diff --git a/components/carousel/__tests__/__snapshots__/demo.test.js.snap b/components/carousel/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..2cc668585c1
--- /dev/null
+++ b/components/carousel/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,428 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "marginTop": 30,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "paddingHorizontal": 15,
+      }
+    }
+  >
+    <View
+      onLayout={[Function]}
+    >
+      <ScrollView
+        afterChange={[Function]}
+        automaticallyAdjustContentInsets={false}
+        autoplay={true}
+        autoplayInterval={3000}
+        autoplayTimeout={2}
+        bounces={true}
+        contentContainerStyle={
+          Object {
+            "backgroundColor": "#fff",
+          }
+        }
+        contentOffset={
+          Object {
+            "x": 0,
+            "y": 0,
+          }
+        }
+        directionalLockEnabled={true}
+        dots={true}
+        horizontal={true}
+        infinite={true}
+        onMomentumScrollEnd={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        removeClippedSubviews={false}
+        scrollEventThrottle={100}
+        selectedIndex={2}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        style={
+          Object {
+            "backgroundColor": "#fff",
+          }
+        }
+        styles={
+          Object {
+            "pagination": Object {
+              "alignItems": "center",
+              "position": "absolute",
+            },
+            "paginationX": Object {
+              "bottom": 10,
+              "left": 0,
+              "right": 0,
+            },
+            "paginationY": Object {
+              "bottom": 0,
+              "right": 10,
+              "top": 0,
+            },
+          }
+        }
+        vertical={false}
+      >
+        <View
+          style={
+            Object {
+              "width": 0,
+            }
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "height": 150,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "backgroundColor": "#ccc",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              Carousel 5
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "width": 0,
+            }
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "height": 150,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "backgroundColor": "red",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              Carousel 1
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "width": 0,
+            }
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "height": 150,
+                  "justifyContent": "center",
+                },
+                undefined,
+                Object {
+                  "backgroundColor": "blue",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              Carousel 2
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "width": 0,
+            }
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "height": 150,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "backgroundColor": "yellow",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              Carousel 3
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "width": 0,
+            }
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "height": 150,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "backgroundColor": "black",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              Carousel 4
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "width": 0,
+            }
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "height": 150,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "backgroundColor": "#ccc",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              Carousel 5
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "width": 0,
+            }
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexGrow": 1,
+                  "height": 150,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "backgroundColor": "red",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              Carousel 1
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "justifyContent": "center",
+            },
+            Array [
+              Object {
+                "alignItems": "center",
+                "position": "absolute",
+              },
+              Object {
+                "bottom": 10,
+                "left": 0,
+                "right": 0,
+              },
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "#ccc",
+                  "borderRadius": 8,
+                  "height": 8,
+                  "width": 8,
+                },
+                Object {
+                  "marginHorizontal": 2.5,
+                  "marginVertical": 3,
+                },
+                false,
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "#ccc",
+                  "borderRadius": 8,
+                  "height": 8,
+                  "width": 8,
+                },
+                Object {
+                  "marginHorizontal": 2.5,
+                  "marginVertical": 3,
+                },
+                false,
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "#ccc",
+                  "borderRadius": 8,
+                  "height": 8,
+                  "width": 8,
+                },
+                Object {
+                  "marginHorizontal": 2.5,
+                  "marginVertical": 3,
+                },
+                Object {
+                  "backgroundColor": "#888",
+                },
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "#ccc",
+                  "borderRadius": 8,
+                  "height": 8,
+                  "width": 8,
+                },
+                Object {
+                  "marginHorizontal": 2.5,
+                  "marginVertical": 3,
+                },
+                false,
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "#ccc",
+                  "borderRadius": 8,
+                  "height": 8,
+                  "width": 8,
+                },
+                Object {
+                  "marginHorizontal": 2.5,
+                  "marginVertical": 3,
+                },
+                false,
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      Carousel 根据内容自适应高度
+    </Text>
+  </View>
+</View>
+`;
diff --git a/components/carousel/__tests__/__snapshots__/demo.test.web.js.snap b/components/carousel/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..8acb578d78c
--- /dev/null
+++ b/components/carousel/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
+<div
+  class="am-wingblank am-wingblank-lg"
+>
+  <div
+    class="sub-title"
+  >
+    normal
+  </div>
+  <div
+    class="slider my-carousel am-carousel"
+    style="position:relative;display:block;width:100%;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;visibility:hidden;"
+  >
+    <div
+      class="slider-frame"
+      style="position:relative;display:block;overflow:hidden;height:auto;margin:0px;padding:0;transform:translate3d(0, 0, 0);-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate(0, 0);box-sizing:border-box;-moz-box-sizing:border-box;"
+    >
+      <ul
+        class="slider-list"
+        style="transform:translate3d(0px, 0px, 0);-webkit-transform:translate3d(0px, 0px, 0);-ms-transform:translate(0px, 0px);position:relative;display:block;margin:0px 0px;padding:0;height:0;width:0;cursor:inherit;box-sizing:border-box;-moz-box-sizing:border-box;"
+      >
+        <li
+          class="slider-slide"
+          style="position:absolute;left:0;top:0;display:inline-block;list-style-type:none;vertical-align:top;width:0;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;margin-left:0;margin-right:0;margin-top:auto;margin-bottom:auto;"
+        >
+          <a
+            href="#"
+          >
+            <img
+              src="https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png"
+            />
+          </a>
+        </li>
+        <li
+          class="slider-slide"
+          style="position:absolute;left:0;top:0;display:inline-block;list-style-type:none;vertical-align:top;width:0;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;margin-left:0;margin-right:0;margin-top:auto;margin-bottom:auto;"
+        >
+          <a
+            href="#"
+          >
+            <img
+              src="https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png"
+            />
+          </a>
+        </li>
+        <li
+          class="slider-slide"
+          style="position:absolute;left:0;top:0;display:inline-block;list-style-type:none;vertical-align:top;width:0;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;margin-left:0;margin-right:0;margin-top:auto;margin-bottom:auto;"
+        >
+          <a
+            href="#"
+          >
+            <img
+              src="https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png"
+            />
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      class="slider-decorator-0"
+      style="position:absolute;bottom:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);"
+    >
+      <div
+        class="am-carousel-wrap"
+      >
+        <div
+          class="am-carousel-wrap-dot am-carousel-wrap-dot-active"
+        >
+          <span />
+        </div>
+        <div
+          class="am-carousel-wrap-dot"
+        >
+          <span />
+        </div>
+        <div
+          class="am-carousel-wrap-dot"
+        >
+          <span />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="sub-title"
+  >
+    vertical
+  </div>
+  <div
+    class="slider my-carousel am-carousel am-carousel-vertical"
+    style="position:relative;display:block;width:100%;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;visibility:hidden;"
+  >
+    <div
+      class="slider-frame"
+      style="position:relative;display:block;overflow:hidden;height:initial;margin:0px;padding:0;transform:translate3d(0, 0, 0);-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate(0, 0);box-sizing:border-box;-moz-box-sizing:border-box;"
+    >
+      <ul
+        class="slider-list"
+        style="transform:translate3d(0px, 0px, 0);-webkit-transform:translate3d(0px, 0px, 0);-ms-transform:translate(0px, 0px);position:relative;display:block;margin:0px 0px;padding:0;height:0;width:auto;cursor:inherit;box-sizing:border-box;-moz-box-sizing:border-box;"
+      >
+        <li
+          class="slider-slide"
+          style="position:absolute;left:0;top:0;display:block;list-style-type:none;vertical-align:top;width:100%;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;"
+        >
+          <div
+            class="v-item"
+          >
+            Carousel 1
+          </div>
+        </li>
+        <li
+          class="slider-slide"
+          style="position:absolute;left:0;top:0;display:block;list-style-type:none;vertical-align:top;width:100%;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;"
+        >
+          <div
+            class="v-item"
+          >
+            Carousel 2
+          </div>
+        </li>
+        <li
+          class="slider-slide"
+          style="position:absolute;left:0;top:0;display:block;list-style-type:none;vertical-align:top;width:100%;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;"
+        >
+          <div
+            class="v-item"
+          >
+            Carousel 3
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/carousel/__tests__/demo.test.js b/components/carousel/__tests__/demo.test.js
new file mode 100644
index 00000000000..19d847464c9
--- /dev/null
+++ b/components/carousel/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('carousel');
diff --git a/components/carousel/__tests__/demo.test.web.js b/components/carousel/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..92c6c8bad7c
--- /dev/null
+++ b/components/carousel/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('carousel');
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..3fdf9c41245
--- /dev/null
+++ b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,1142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
+<View>
+  <View
+    style={
+      Object {
+        "padding": 10,
+      }
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Image
+        source={1}
+        style={
+          Array [
+            Object {
+              "height": 21,
+              "width": 21,
+            },
+            Object {
+              "tintColor": "#f00",
+            },
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Image
+        source={1}
+        style={
+          Array [
+            Object {
+              "height": 21,
+              "width": 21,
+            },
+            undefined,
+          ]
+        }
+      />
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "marginLeft": 8,
+          }
+        }
+      >
+        Checkbox
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Image
+        source={1}
+        style={
+          Array [
+            Object {
+              "height": 21,
+              "width": 21,
+            },
+            undefined,
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Image
+        source={1}
+        style={
+          Array [
+            Object {
+              "height": 21,
+              "width": 21,
+            },
+            undefined,
+          ]
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+    testID={undefined}
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Image
+        source={1}
+        style={
+          Array [
+            Object {
+              "height": 21,
+              "width": 21,
+            },
+            Array [
+              Object {
+                "marginLeft": 15,
+                "marginRight": 8,
+              },
+              undefined,
+            ],
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+      >
+        同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+    testID={undefined}
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Image
+        source={1}
+        style={
+          Array [
+            Object {
+              "height": 21,
+              "width": 21,
+            },
+            Array [
+              Object {
+                "marginLeft": 15,
+                "marginRight": 8,
+              },
+              Object {
+                "tintColor": "#f00",
+              },
+            ],
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+      >
+        同意 《信用支付服务合同
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+    testID={undefined}
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Image
+        source={1}
+        style={
+          Array [
+            Object {
+              "height": 21,
+              "width": 21,
+            },
+            Array [
+              Object {
+                "marginLeft": 15,
+                "marginRight": 8,
+              },
+              undefined,
+            ],
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+      >
+        未选中，不可编辑 《信用支付服务合同》
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+    testID={undefined}
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Image
+        source={1}
+        style={
+          Array [
+            Object {
+              "height": 21,
+              "width": 21,
+            },
+            Array [
+              Object {
+                "marginLeft": 15,
+                "marginRight": 8,
+              },
+              undefined,
+            ],
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+      >
+        强制选中,不可编辑 《信用支付服务合同信用支付服务合同信用支付服务合同》
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "marginTop": 12,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#ddd",
+          "borderTopWidth": 0.5,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "marginTop": 12,
+          }
+        }
+      >
+        表单多选项，普通列表中多选项
+      </Text>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          line={undefined}
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={1}
+              style={
+                Array [
+                  Object {
+                    "height": 21,
+                    "width": 21,
+                  },
+                  Array [
+                    Object {
+                      "alignSelf": "center",
+                      "marginRight": 8,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                签约
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          line={undefined}
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={1}
+              style={
+                Array [
+                  Object {
+                    "height": 21,
+                    "width": 21,
+                  },
+                  Array [
+                    Object {
+                      "alignSelf": "center",
+                      "marginRight": 8,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                物料铺设
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          line={undefined}
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={1}
+              style={
+                Array [
+                  Object {
+                    "height": 21,
+                    "width": 21,
+                  },
+                  Array [
+                    Object {
+                      "alignSelf": "center",
+                      "marginRight": 8,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                机具维护（不能选）
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          line={undefined}
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={1}
+              style={
+                Array [
+                  Object {
+                    "height": 21,
+                    "width": 21,
+                  },
+                  Array [
+                    Object {
+                      "alignSelf": "center",
+                      "marginRight": 8,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                产品问题解决（必选）
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#fff",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "bottom": 0,
+              "height": 1,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.web.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..fd38138647c
--- /dev/null
+++ b/components/checkbox/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,187 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/checkbox/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      CheckboxItem 演示
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-checkbox-item am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-thumb"
+        >
+          <label
+            class="am-checkbox-wrapper"
+          >
+            <span
+              class="am-checkbox"
+            >
+              <input
+                class="am-checkbox-input"
+                type="checkbox"
+              />
+              <span
+                class="am-checkbox-inner"
+              />
+            </span>
+          </label>
+        </div>
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            博士
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-checkbox-item am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-thumb"
+        >
+          <label
+            class="am-checkbox-wrapper"
+          >
+            <span
+              class="am-checkbox"
+            >
+              <input
+                class="am-checkbox-input"
+                type="checkbox"
+              />
+              <span
+                class="am-checkbox-inner"
+              />
+            </span>
+          </label>
+        </div>
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            本科
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-checkbox-item am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-thumb"
+        >
+          <label
+            class="am-checkbox-wrapper"
+          >
+            <span
+              class="am-checkbox"
+            >
+              <input
+                class="am-checkbox-input"
+                type="checkbox"
+              />
+              <span
+                class="am-checkbox-inner"
+              />
+            </span>
+          </label>
+        </div>
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            高中
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-checkbox-item am-checkbox-item-disabled am-list-item am-list-item-middle"
+        data-seed="logId"
+      >
+        <div
+          class="am-list-thumb"
+        >
+          <label
+            class="am-checkbox-wrapper"
+          >
+            <span
+              class="am-checkbox am-checkbox-checked am-checkbox-disabled"
+            >
+              <input
+                checked=""
+                class="am-checkbox-input"
+                disabled=""
+                type="checkbox"
+              />
+              <span
+                class="am-checkbox-inner"
+              />
+            </span>
+          </label>
+        </div>
+        <div
+          class="am-list-line am-list-line-multiple"
+        >
+          <div
+            class="am-list-content"
+          >
+            初中
+            <div
+              class="am-list-brief"
+            >
+              辅助文字内容
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-flexbox am-flexbox-align-middle"
+  >
+    <div
+      class="am-flexbox-item"
+    >
+      <div
+        class="am-checkbox-agree"
+        data-seed="logId"
+      >
+        <label
+          class="am-checkbox-agree-label am-checkbox-wrapper"
+        >
+          <span
+            class="am-checkbox"
+          >
+            <input
+              class="am-checkbox-input"
+              type="checkbox"
+            />
+            <span
+              class="am-checkbox-inner"
+            />
+          </span>
+          已阅读协议
+          <a>
+            《协议链接》
+          </a>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/checkbox/__tests__/demo.test.js b/components/checkbox/__tests__/demo.test.js
new file mode 100644
index 00000000000..6f16592a325
--- /dev/null
+++ b/components/checkbox/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('checkbox');
diff --git a/components/checkbox/__tests__/demo.test.web.js b/components/checkbox/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..3c6691465d1
--- /dev/null
+++ b/components/checkbox/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('checkbox');
diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..d2115b7a7e9
--- /dev/null
+++ b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/date-picker/demo/popup.tsx correctly 1`] = `
+<View>
+  <View
+    style={undefined}
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#ddd",
+          "borderTopWidth": 0.5,
+        }
+      }
+    >
+      <View
+        style={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              undefined,
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "backgroundColor": "#fff",
+                  "flexDirection": "row",
+                  "flexGrow": 1,
+                  "paddingLeft": 15,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "borderBottomColor": "#ddd",
+                    "borderBottomWidth": 0.5,
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "minHeight": 45,
+                    "paddingBottom": 6,
+                    "paddingRight": 15,
+                    "paddingTop": 6,
+                  },
+                  false,
+                  false,
+                ]
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "flexDirection": "column",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000",
+                        "fontSize": 17,
+                        "lineHeight": 19,
+                        "textAlignVertical": "center",
+                      },
+                    ]
+                  }
+                >
+                  选择时间
+                </Text>
+              </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "flexDirection": "column",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={
+                    Array [
+                      Object {
+                        "color": "#888",
+                        "fontSize": 17,
+                        "lineHeight": 19,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
+                      },
+                    ]
+                  }
+                >
+                  请选择
+                </Text>
+              </View>
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 13,
+                    "marginLeft": 8,
+                    "marginTop": 3,
+                    "width": 8,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#fff",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "bottom": 0,
+              "height": 1,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.web.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..79fa9066cad
--- /dev/null
+++ b/components/date-picker/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-list date-picker-list"
+    style="background-color:white;"
+  >
+    <div
+      class="am-list-body"
+    >
+      <div>
+        <div
+          class="am-list-item am-list-item-middle"
+        >
+          <div
+            class="am-list-line"
+          >
+            <div
+              class="am-list-content"
+            >
+              日期
+            </div>
+            <div
+              class="am-list-extra"
+            >
+              2016-11-22
+            </div>
+            <div
+              class="am-list-arrow am-list-arrow-horizontal"
+            />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="am-list-item am-list-item-middle"
+        >
+          <div
+            class="am-list-line"
+          >
+            <div
+              class="am-list-content"
+            >
+              时间
+            </div>
+            <div
+              class="am-list-extra"
+            >
+              请选择
+            </div>
+            <div
+              class="am-list-arrow am-list-arrow-horizontal"
+            />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="am-list-item am-list-item-middle"
+        >
+          <div
+            class="am-list-line"
+          >
+            <div
+              class="am-list-content"
+            >
+              时间，限定上下限
+            </div>
+            <div
+              class="am-list-extra"
+            >
+              00:00
+            </div>
+            <div
+              class="am-list-arrow am-list-arrow-horizontal"
+            />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="am-list-item am-list-item-middle"
+        >
+          <div
+            class="am-list-line"
+          >
+            <div
+              class="am-list-content"
+            >
+              日期+时间
+            </div>
+            <div
+              class="am-list-extra"
+            >
+              2016-11-22 00:00
+            </div>
+            <div
+              class="am-list-arrow am-list-arrow-horizontal"
+            />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="am-list-item am-list-item-middle"
+        >
+          <div
+            class="am-list-line"
+          >
+            <div
+              class="am-list-content"
+            >
+              time(en_US)
+            </div>
+            <div
+              class="am-list-extra"
+            >
+              16:00 +00:00
+            </div>
+            <div
+              class="am-list-arrow am-list-arrow-horizontal"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            <div>
+              自定义控制显示/隐藏的元素
+            </div>
+          </div>
+          <div
+            class="am-list-extra"
+          />
+        </div>
+      </div>
+      <div>
+        <div
+          style="background-color:#fff;height:0.9rem;line-height:0.9rem;padding:0 0.3rem;"
+        >
+          时间选择(自定义 children)
+          <span
+            style="float:right;color:#888;"
+          >
+            请选择(可选)
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/date-picker/__tests__/demo.test.js b/components/date-picker/__tests__/demo.test.js
new file mode 100644
index 00000000000..a5601997157
--- /dev/null
+++ b/components/date-picker/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('date-picker');
diff --git a/components/date-picker/__tests__/demo.test.web.js b/components/date-picker/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..cf781de4528
--- /dev/null
+++ b/components/date-picker/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('date-picker');
diff --git a/components/drawer/__tests__/__snapshots__/demo.test.web.js.snap b/components/drawer/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..6285d6e8956
--- /dev/null
+++ b/components/drawer/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,928 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/drawer/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-navbar am-navbar-dark"
+  >
+    <div
+      class="am-navbar-left"
+    >
+      <span
+        class="am-navbar-left-icon"
+      >
+        <svg
+          class="am-icon am-icon-ellipsis am-icon-md"
+        >
+          <use
+            xlink:href="#ellipsis"
+          />
+        </svg>
+      </span>
+      <span
+        class="am-navbar-left-content"
+      />
+    </div>
+    <div
+      class="am-navbar-title"
+    >
+      基本
+    </div>
+    <div
+      class="am-navbar-right"
+    />
+  </div>
+  <div
+    class="my-drawer am-drawer am-drawer-left"
+    style="min-height:-200px;"
+  >
+    <div
+      class="am-drawer-sidebar"
+    >
+      <div
+        class="am-list"
+      >
+        <div
+          class="am-list-body"
+        >
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line am-list-line-multiple"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类1
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类2
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类3
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类4
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类5
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类6
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类7
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类8
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类9
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类10
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类11
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类12
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类13
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类14
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类15
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类16
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类17
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类18
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类19
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-drawer-overlay"
+      role="presentation"
+    />
+    <div
+      class="am-drawer-content"
+      style="color:#A6A6A6;text-align:center;padding-top:42px;"
+    >
+      请点击左上角图标
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/drawer/demo/dock.md correctly 1`] = `
+<div
+  style="height:100%;"
+>
+  <div
+    class="am-navbar am-navbar-dark"
+  >
+    <div
+      class="am-navbar-left"
+    >
+      <span
+        class="am-navbar-left-icon"
+      >
+        <svg
+          class="am-icon am-icon-ellipsis am-icon-md"
+        >
+          <use
+            xlink:href="#ellipsis"
+          />
+        </svg>
+      </span>
+      <span
+        class="am-navbar-left-content"
+      />
+    </div>
+    <div
+      class="am-navbar-title"
+    >
+      嵌入文档
+    </div>
+    <div
+      class="am-navbar-right"
+    />
+  </div>
+  <div
+    class="my-drawer am-drawer am-drawer-left"
+    style="min-height:-200px;"
+  >
+    <div
+      class="am-drawer-sidebar"
+      style="border:1px solid #ddd;"
+    >
+      <div
+        class="am-list"
+      >
+        <div
+          class="am-list-body"
+        >
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line am-list-line-multiple"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类1
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类2
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类3
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类4
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类5
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类6
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类7
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类8
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类9
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类10
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类11
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类12
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类13
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类14
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类15
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类16
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类17
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类18
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-thumb"
+            >
+              <img
+                src="https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png"
+              />
+            </div>
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                分类19
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-drawer-overlay"
+      role="presentation"
+    />
+    <div
+      class="am-drawer-content"
+      style="color:#A6A6A6;text-align:center;padding-top:42px;"
+    >
+      请点击左上角图标
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/drawer/__tests__/demo.test.js b/components/drawer/__tests__/demo.test.js
new file mode 100644
index 00000000000..41591c3bb26
--- /dev/null
+++ b/components/drawer/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('drawer', { skip: ['basic'] });
diff --git a/components/drawer/__tests__/demo.test.web.js b/components/drawer/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..b7abc9bc5c8
--- /dev/null
+++ b/components/drawer/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('drawer');
diff --git a/components/drawer/demo/basic.tsx b/components/drawer/demo/basic.tsx
index b91b97525f0..fa9cb393c28 100644
--- a/components/drawer/demo/basic.tsx
+++ b/components/drawer/demo/basic.tsx
@@ -55,6 +55,8 @@ export default class DrawerExample extends React.Component<any, any> {
       onOpenChange: this.onOpenChange,
     };
 
+    console.log(this.props);
+
     return (
       <Drawer
         sidebar={sidebar}
diff --git a/components/flex/__tests__/__snapshots__/demo.test.js.snap b/components/flex/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..839af03d001
--- /dev/null
+++ b/components/flex/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,2604 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/flex/demo/basic.tsx correctly 1`] = `
+<ScrollView
+  automaticallyAdjustContentInsets={false}
+  showsHorizontalScrollIndicator={false}
+  showsVerticalScrollIndicator={false}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 20,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "marginBottom": 10,
+        }
+      }
+    >
+      项目的排列方向
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      direction="row":主轴为水平方向，起点在左端
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            Object {
+              "paddingLeft": 4,
+              "paddingRight": 4,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 23,
+                  "paddingLeft": 5,
+                  "paddingRight": 5,
+                },
+                Object {
+                  "backgroundColor": "#fff",
+                  "borderColor": "#ddd",
+                },
+                false,
+                false,
+                false,
+                undefined,
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "fontSize": 12,
+                },
+                Object {
+                  "color": "#000",
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            按钮1
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            Object {
+              "paddingLeft": 4,
+              "paddingRight": 4,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 23,
+                  "paddingLeft": 5,
+                  "paddingRight": 5,
+                },
+                Object {
+                  "backgroundColor": "#fff",
+                  "borderColor": "#ddd",
+                },
+                false,
+                false,
+                false,
+                undefined,
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "fontSize": 12,
+                },
+                Object {
+                  "color": "#000",
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            按钮2
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            Object {
+              "paddingLeft": 4,
+              "paddingRight": 4,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 23,
+                  "paddingLeft": 5,
+                  "paddingRight": 5,
+                },
+                Object {
+                  "backgroundColor": "#fff",
+                  "borderColor": "#ddd",
+                },
+                false,
+                false,
+                false,
+                undefined,
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "fontSize": 12,
+                },
+                Object {
+                  "color": "#000",
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            按钮3
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 5,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      direction="column":主轴为垂直方向，起点在上沿
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            Object {
+              "paddingBottom": 4,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 23,
+                  "paddingLeft": 5,
+                  "paddingRight": 5,
+                },
+                Object {
+                  "backgroundColor": "#fff",
+                  "borderColor": "#ddd",
+                },
+                false,
+                false,
+                false,
+                undefined,
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "fontSize": 12,
+                },
+                Object {
+                  "color": "#000",
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            按钮1
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            Object {
+              "paddingBottom": 4,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 23,
+                  "paddingLeft": 5,
+                  "paddingRight": 5,
+                },
+                Object {
+                  "backgroundColor": "#fff",
+                  "borderColor": "#ddd",
+                },
+                false,
+                false,
+                false,
+                undefined,
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "fontSize": 12,
+                },
+                Object {
+                  "color": "#000",
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            按钮2
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            Object {
+              "paddingBottom": 4,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 23,
+                  "paddingLeft": 5,
+                  "paddingRight": 5,
+                },
+                Object {
+                  "backgroundColor": "#fff",
+                  "borderColor": "#ddd",
+                },
+                false,
+                false,
+                false,
+                undefined,
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "fontSize": 12,
+                },
+                Object {
+                  "color": "#000",
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            按钮3
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 5,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "marginBottom": 20,
+          "marginTop": 20,
+        }
+      }
+    >
+      项目在主轴上的对齐方式
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      justify="start":左对齐
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 5,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      justify="center":居中
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "center",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 5,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      justify="end":右对齐
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-end",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 5,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      justify="between":两端对齐，项目之间的间隔都相等
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 5,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      justify="around":每个项目两侧的间隔相等
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "space-around",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 5,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "marginBottom": 20,
+          "marginTop": 20,
+        }
+      }
+    >
+      项目在交叉轴上的对齐方式
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      align="start":交叉轴的起点对齐
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          Object {
+            "height": 30,
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "borderColor": "#527fe4",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "fontSize": 20,
+          }
+        }
+      >
+        兜兜
+      </Text>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "borderColor": "#527fe4",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "fontSize": 18,
+          }
+        }
+      >
+        兜兜
+      </Text>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "borderColor": "#527fe4",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "fontSize": 16,
+          }
+        }
+      >
+        兜兜
+      </Text>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "borderColor": "#527fe4",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "fontSize": 14,
+          }
+        }
+      >
+        兜兜
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 5,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      align="center":交叉轴的中点对齐
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          Object {
+            "height": 30,
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "borderColor": "#527fe4",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "fontSize": 20,
+          }
+        }
+      >
+        兜兜
+      </Text>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "borderColor": "#527fe4",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "fontSize": 18,
+          }
+        }
+      >
+        兜兜
+      </Text>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "borderColor": "#527fe4",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "fontSize": 16,
+          }
+        }
+      >
+        兜兜
+      </Text>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "borderColor": "#527fe4",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "fontSize": 14,
+          }
+        }
+      >
+        兜兜
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 5,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      align="end":交叉轴的终点对齐
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-end",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          Object {
+            "height": 30,
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "borderColor": "#527fe4",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "fontSize": 20,
+          }
+        }
+      >
+        兜兜
+      </Text>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "borderColor": "#527fe4",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "fontSize": 18,
+          }
+        }
+      >
+        兜兜
+      </Text>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "borderColor": "#527fe4",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "fontSize": 16,
+          }
+        }
+      >
+        兜兜
+      </Text>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "borderColor": "#527fe4",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "fontSize": 14,
+          }
+        }
+      >
+        兜兜
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 5,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      align="stretch":如果项目未设置高度或设为auto，将占满整个容器的高度
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 15,
+            "marginRight": 15,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "stretch",
+              "flexDirection": "row",
+              "flexWrap": "nowrap",
+              "justifyContent": "flex-start",
+            },
+            Object {
+              "height": 70,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "borderColor": "#527fe4",
+              "borderStyle": "solid",
+              "borderWidth": 1,
+              "fontSize": 20,
+            }
+          }
+        >
+          兜兜
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "borderColor": "#527fe4",
+              "borderStyle": "solid",
+              "borderWidth": 1,
+              "fontSize": 18,
+            }
+          }
+        >
+          兜兜
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "borderColor": "#527fe4",
+              "borderStyle": "solid",
+              "borderWidth": 1,
+              "fontSize": 16,
+            }
+          }
+        >
+          兜兜
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "borderColor": "#527fe4",
+              "borderStyle": "solid",
+              "borderWidth": 1,
+              "fontSize": 14,
+            }
+          }
+        >
+          兜兜
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 5,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "marginBottom": 10,
+        }
+      }
+    >
+      是否折行
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      wrap="wrap":换行
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "wrap",
+            "justifyContent": "flex-start",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+          "marginTop": 5,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      wrap="nowrap":不换行
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        Object {
+          "marginBottom": 5,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "#527fe4",
+            "borderRadius": 10,
+            "height": 20,
+            "margin": 1,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+</ScrollView>
+`;
diff --git a/components/flex/__tests__/__snapshots__/demo.test.web.js.snap b/components/flex/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..4ada85b5b0c
--- /dev/null
+++ b/components/flex/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,321 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
+<div
+  class="flex-container"
+>
+  <div
+    class="sub-title"
+  >
+    基本
+  </div>
+  <div
+    class="am-flexbox am-flexbox-align-middle"
+  >
+    <div
+      class="am-flexbox-item"
+    >
+      <div
+        style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+      >
+        Item
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item"
+    >
+      <div
+        style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+      >
+        Item
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-flexbox am-flexbox-align-middle"
+  >
+    <div
+      class="am-flexbox-item"
+    >
+      <div
+        style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+      >
+        Item
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item"
+    >
+      <div
+        style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+      >
+        Item
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item"
+    >
+      <div
+        style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+      >
+        Item
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-flexbox am-flexbox-align-middle"
+  >
+    <div
+      class="am-flexbox-item"
+    >
+      <div
+        style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+      >
+        Item
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item"
+    >
+      <div
+        style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+      >
+        Item
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item"
+    >
+      <div
+        style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+      >
+        Item
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item"
+    >
+      <div
+        style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+      >
+        Item
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="sub-title"
+  >
+    wrap 换行
+  </div>
+  <div
+    class="am-flexbox am-flexbox-wrap am-flexbox-align-middle"
+  >
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="sub-title"
+  >
+    轴对齐方式
+  </div>
+  <div
+    class="am-flexbox am-flexbox-justify-center am-flexbox-align-middle"
+  >
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-flexbox am-flexbox-justify-end am-flexbox-align-middle"
+  >
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-flexbox am-flexbox-justify-between am-flexbox-align-middle"
+  >
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-flexbox am-flexbox-align-top"
+  >
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline small"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-flexbox am-flexbox-align-bottom"
+  >
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline small"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-flexbox am-flexbox-align-baseline"
+  >
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline small"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+    <div
+      class="inline"
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Item
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/flex/__tests__/demo.test.js b/components/flex/__tests__/demo.test.js
new file mode 100644
index 00000000000..2a664baecc3
--- /dev/null
+++ b/components/flex/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('flex');
diff --git a/components/flex/__tests__/demo.test.web.js b/components/flex/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..c458f3eb971
--- /dev/null
+++ b/components/flex/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('flex');
diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..73287494551
--- /dev/null
+++ b/components/grid/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,2308 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/grid/demo/basic.tsx correctly 1`] = `
+<ScrollView>
+  <View
+    style={
+      Array [
+        Object {
+          "margin": 10,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      简单示例
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "padding": 10,
+        },
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexWrap": "nowrap",
+              "justifyContent": "flex-start",
+            },
+            Array [
+              Object {
+                "borderColor": "#ddd",
+              },
+              Object {
+                "borderBottomWidth": 0,
+                "borderTopWidth": 0,
+              },
+            ],
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "borderColor": "#ddd",
+                },
+                Object {
+                  "borderRightWidth": 0,
+                  "height": 187.5,
+                },
+                Object {
+                  "borderLeftWidth": 0,
+                },
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "column",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "flex": 1,
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 22,
+                  "width": 22,
+                }
+              }
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": "#000",
+                  "fontSize": 12,
+                  "marginTop": 9,
+                }
+              }
+            >
+              名字0
+            </Text>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "borderColor": "#ddd",
+                },
+                Object {
+                  "borderRightWidth": 0,
+                  "height": 187.5,
+                },
+                Object {
+                  "borderLeftWidth": 0,
+                },
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "column",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "flex": 1,
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 22,
+                  "width": 22,
+                }
+              }
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": "#000",
+                  "fontSize": 12,
+                  "marginTop": 9,
+                }
+              }
+            >
+              名字1
+            </Text>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "borderColor": "#ddd",
+                },
+                Object {
+                  "borderRightWidth": 0,
+                  "height": 187.5,
+                },
+                Object {
+                  "borderLeftWidth": 0,
+                },
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "column",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "flex": 1,
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 22,
+                  "width": 22,
+                }
+              }
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": "#000",
+                  "fontSize": 12,
+                  "marginTop": 9,
+                }
+              }
+            >
+              名字2
+            </Text>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "borderColor": "#ddd",
+                },
+                Object {
+                  "borderRightWidth": 0,
+                  "height": 187.5,
+                },
+                Object {
+                  "borderLeftWidth": 0,
+                },
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "column",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "flex": 1,
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 22,
+                  "width": 22,
+                }
+              }
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": "#000",
+                  "fontSize": 12,
+                  "marginTop": 9,
+                }
+              }
+            >
+              名字3
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexWrap": "nowrap",
+              "justifyContent": "flex-start",
+            },
+            Array [
+              Object {
+                "borderColor": "#ddd",
+              },
+              Object {
+                "borderBottomWidth": 0,
+                "borderTopWidth": 0,
+              },
+            ],
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "borderColor": "#ddd",
+                },
+                Object {
+                  "borderRightWidth": 0,
+                  "height": 187.5,
+                },
+                Object {
+                  "borderLeftWidth": 0,
+                },
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "column",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "flex": 1,
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 22,
+                  "width": 22,
+                }
+              }
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": "#000",
+                  "fontSize": 12,
+                  "marginTop": 9,
+                }
+              }
+            >
+              名字4
+            </Text>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "borderColor": "#ddd",
+                },
+                Object {
+                  "borderRightWidth": 0,
+                  "height": 187.5,
+                },
+                Object {
+                  "borderLeftWidth": 0,
+                },
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "column",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "flex": 1,
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 22,
+                  "width": 22,
+                }
+              }
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": "#000",
+                  "fontSize": 12,
+                  "marginTop": 9,
+                }
+              }
+            >
+              名字5
+            </Text>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "borderColor": "#ddd",
+                },
+                Object {
+                  "borderRightWidth": 0,
+                  "height": 187.5,
+                },
+                Object {
+                  "borderLeftWidth": 0,
+                },
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "column",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "flex": 1,
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 22,
+                  "width": 22,
+                }
+              }
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": "#000",
+                  "fontSize": 12,
+                  "marginTop": 9,
+                }
+              }
+            >
+              名字6
+            </Text>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "borderColor": "#ddd",
+                },
+                Object {
+                  "borderRightWidth": 0,
+                  "height": 187.5,
+                },
+                Object {
+                  "borderLeftWidth": 0,
+                },
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "column",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "flex": 1,
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 22,
+                  "width": 22,
+                }
+              }
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": "#000",
+                  "fontSize": 12,
+                  "marginTop": 9,
+                }
+              }
+            >
+              名字7
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexWrap": "nowrap",
+              "justifyContent": "flex-start",
+            },
+            Array [
+              Object {
+                "borderColor": "#ddd",
+              },
+              Object {
+                "borderBottomWidth": 0,
+                "borderTopWidth": 0,
+              },
+            ],
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "borderColor": "#ddd",
+                },
+                Object {
+                  "borderRightWidth": 0,
+                  "height": 187.5,
+                },
+                Object {
+                  "borderLeftWidth": 0,
+                },
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "column",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "flex": 1,
+                },
+              ]
+            }
+            testID={undefined}
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 22,
+                  "width": 22,
+                }
+              }
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": "#000",
+                  "fontSize": 12,
+                  "marginTop": 9,
+                }
+              }
+            >
+              名字8
+            </Text>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "borderColor": "#ddd",
+                },
+                Object {
+                  "borderRightWidth": 0,
+                  "height": 187.5,
+                },
+              ],
+            ]
+          }
+          testID={undefined}
+        />
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "borderColor": "#ddd",
+                },
+                Object {
+                  "borderRightWidth": 0,
+                  "height": 187.5,
+                },
+              ],
+            ]
+          }
+          testID={undefined}
+        />
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                Object {
+                  "borderColor": "#ddd",
+                },
+                Object {
+                  "borderRightWidth": 0,
+                  "height": 187.5,
+                },
+              ],
+            ]
+          }
+          testID={undefined}
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "margin": 10,
+        },
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      走马灯
+    </Text>
+  </View>
+  <View
+    onLayout={[Function]}
+  >
+    <ScrollView
+      automaticallyAdjustContentInsets={false}
+      autoplay={false}
+      autoplayInterval={3000}
+      bounces={true}
+      contentContainerStyle={undefined}
+      contentOffset={
+        Object {
+          "x": 0,
+          "y": 0,
+        }
+      }
+      directionalLockEnabled={true}
+      dots={true}
+      horizontal={true}
+      infinite={false}
+      onMomentumScrollEnd={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={false}
+      scrollEventThrottle={100}
+      selectedIndex={0}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      styles={
+        Object {
+          "pagination": Object {
+            "alignItems": "center",
+            "position": "absolute",
+          },
+          "paginationX": Object {
+            "bottom": 10,
+            "left": 0,
+            "right": 0,
+          },
+          "paginationY": Object {
+            "bottom": 0,
+            "right": 10,
+            "top": 0,
+          },
+        }
+      }
+      vertical={false}
+    >
+      <View
+        style={
+          Object {
+            "width": 0,
+          }
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#ddd",
+              },
+              Object {
+                "borderTopWidth": 0,
+              },
+            ]
+          }
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "flex-start",
+                },
+                Array [
+                  Object {
+                    "borderColor": "#ddd",
+                  },
+                  Object {
+                    "borderBottomWidth": 1,
+                    "borderTopWidth": 1,
+                  },
+                ],
+              ]
+            }
+            testID={undefined}
+          >
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                  },
+                  Array [
+                    Object {
+                      "borderColor": "#ddd",
+                    },
+                    Object {
+                      "borderRightWidth": 1,
+                      "height": 187.5,
+                    },
+                    Object {
+                      "borderLeftWidth": 1,
+                    },
+                  ],
+                ]
+              }
+              testID={undefined}
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "column",
+                      "flexWrap": "nowrap",
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID={undefined}
+              >
+                <Image
+                  source={
+                    Object {
+                      "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                    }
+                  }
+                  style={
+                    Object {
+                      "height": 22,
+                      "width": 22,
+                    }
+                  }
+                />
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#000",
+                      "fontSize": 12,
+                      "marginTop": 9,
+                    }
+                  }
+                >
+                  名字0
+                </Text>
+              </View>
+            </View>
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                  },
+                  Array [
+                    Object {
+                      "borderColor": "#ddd",
+                    },
+                    Object {
+                      "borderRightWidth": 1,
+                      "height": 187.5,
+                    },
+                    Object {
+                      "borderLeftWidth": 0,
+                    },
+                  ],
+                ]
+              }
+              testID={undefined}
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "column",
+                      "flexWrap": "nowrap",
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID={undefined}
+              >
+                <Image
+                  source={
+                    Object {
+                      "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                    }
+                  }
+                  style={
+                    Object {
+                      "height": 22,
+                      "width": 22,
+                    }
+                  }
+                />
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#000",
+                      "fontSize": 12,
+                      "marginTop": 9,
+                    }
+                  }
+                >
+                  名字1
+                </Text>
+              </View>
+            </View>
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                  },
+                  Array [
+                    Object {
+                      "borderColor": "#ddd",
+                    },
+                    Object {
+                      "borderRightWidth": 1,
+                      "height": 187.5,
+                    },
+                    Object {
+                      "borderLeftWidth": 0,
+                    },
+                  ],
+                ]
+              }
+              testID={undefined}
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "column",
+                      "flexWrap": "nowrap",
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID={undefined}
+              >
+                <Image
+                  source={
+                    Object {
+                      "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                    }
+                  }
+                  style={
+                    Object {
+                      "height": 22,
+                      "width": 22,
+                    }
+                  }
+                />
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#000",
+                      "fontSize": 12,
+                      "marginTop": 9,
+                    }
+                  }
+                >
+                  名字2
+                </Text>
+              </View>
+            </View>
+          </View>
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "flex-start",
+                },
+                Array [
+                  Object {
+                    "borderColor": "#ddd",
+                  },
+                  Object {
+                    "borderBottomWidth": 1,
+                    "borderTopWidth": 0,
+                  },
+                ],
+              ]
+            }
+            testID={undefined}
+          >
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                  },
+                  Array [
+                    Object {
+                      "borderColor": "#ddd",
+                    },
+                    Object {
+                      "borderRightWidth": 1,
+                      "height": 187.5,
+                    },
+                    Object {
+                      "borderLeftWidth": 1,
+                    },
+                  ],
+                ]
+              }
+              testID={undefined}
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "column",
+                      "flexWrap": "nowrap",
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID={undefined}
+              >
+                <Image
+                  source={
+                    Object {
+                      "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                    }
+                  }
+                  style={
+                    Object {
+                      "height": 22,
+                      "width": 22,
+                    }
+                  }
+                />
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#000",
+                      "fontSize": 12,
+                      "marginTop": 9,
+                    }
+                  }
+                >
+                  名字3
+                </Text>
+              </View>
+            </View>
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                  },
+                  Array [
+                    Object {
+                      "borderColor": "#ddd",
+                    },
+                    Object {
+                      "borderRightWidth": 1,
+                      "height": 187.5,
+                    },
+                    Object {
+                      "borderLeftWidth": 0,
+                    },
+                  ],
+                ]
+              }
+              testID={undefined}
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "column",
+                      "flexWrap": "nowrap",
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID={undefined}
+              >
+                <Image
+                  source={
+                    Object {
+                      "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                    }
+                  }
+                  style={
+                    Object {
+                      "height": 22,
+                      "width": 22,
+                    }
+                  }
+                />
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#000",
+                      "fontSize": 12,
+                      "marginTop": 9,
+                    }
+                  }
+                >
+                  名字4
+                </Text>
+              </View>
+            </View>
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                  },
+                  Array [
+                    Object {
+                      "borderColor": "#ddd",
+                    },
+                    Object {
+                      "borderRightWidth": 1,
+                      "height": 187.5,
+                    },
+                    Object {
+                      "borderLeftWidth": 0,
+                    },
+                  ],
+                ]
+              }
+              testID={undefined}
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "column",
+                      "flexWrap": "nowrap",
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID={undefined}
+              >
+                <Image
+                  source={
+                    Object {
+                      "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                    }
+                  }
+                  style={
+                    Object {
+                      "height": 22,
+                      "width": 22,
+                    }
+                  }
+                />
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#000",
+                      "fontSize": 12,
+                      "marginTop": 9,
+                    }
+                  }
+                >
+                  名字5
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Object {
+            "width": 0,
+          }
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#ddd",
+              },
+              Object {
+                "borderTopWidth": 1,
+              },
+            ]
+          }
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "flex-start",
+                },
+                Array [
+                  Object {
+                    "borderColor": "#ddd",
+                  },
+                  Object {
+                    "borderBottomWidth": 1,
+                    "borderTopWidth": 0,
+                  },
+                ],
+              ]
+            }
+            testID={undefined}
+          >
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                  },
+                  Array [
+                    Object {
+                      "borderColor": "#ddd",
+                    },
+                    Object {
+                      "borderRightWidth": 1,
+                      "height": 187.5,
+                    },
+                    Object {
+                      "borderLeftWidth": 1,
+                    },
+                  ],
+                ]
+              }
+              testID={undefined}
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "column",
+                      "flexWrap": "nowrap",
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID={undefined}
+              >
+                <Image
+                  source={
+                    Object {
+                      "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                    }
+                  }
+                  style={
+                    Object {
+                      "height": 22,
+                      "width": 22,
+                    }
+                  }
+                />
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#000",
+                      "fontSize": 12,
+                      "marginTop": 9,
+                    }
+                  }
+                >
+                  名字6
+                </Text>
+              </View>
+            </View>
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                  },
+                  Array [
+                    Object {
+                      "borderColor": "#ddd",
+                    },
+                    Object {
+                      "borderRightWidth": 1,
+                      "height": 187.5,
+                    },
+                    Object {
+                      "borderLeftWidth": 0,
+                    },
+                  ],
+                ]
+              }
+              testID={undefined}
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "column",
+                      "flexWrap": "nowrap",
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID={undefined}
+              >
+                <Image
+                  source={
+                    Object {
+                      "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                    }
+                  }
+                  style={
+                    Object {
+                      "height": 22,
+                      "width": 22,
+                    }
+                  }
+                />
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#000",
+                      "fontSize": 12,
+                      "marginTop": 9,
+                    }
+                  }
+                >
+                  名字7
+                </Text>
+              </View>
+            </View>
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                  },
+                  Array [
+                    Object {
+                      "borderColor": "#ddd",
+                    },
+                    Object {
+                      "borderRightWidth": 1,
+                      "height": 187.5,
+                    },
+                    Object {
+                      "borderLeftWidth": 0,
+                    },
+                  ],
+                ]
+              }
+              testID={undefined}
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "column",
+                      "flexWrap": "nowrap",
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "flex": 1,
+                    },
+                  ]
+                }
+                testID={undefined}
+              >
+                <Image
+                  source={
+                    Object {
+                      "uri": "https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png",
+                    }
+                  }
+                  style={
+                    Object {
+                      "height": 22,
+                      "width": 22,
+                    }
+                  }
+                />
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#000",
+                      "fontSize": 12,
+                      "marginTop": 9,
+                    }
+                  }
+                >
+                  名字8
+                </Text>
+              </View>
+            </View>
+          </View>
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexWrap": "nowrap",
+                  "justifyContent": "flex-start",
+                },
+                Array [
+                  Object {
+                    "borderColor": "#ddd",
+                  },
+                  Object {
+                    "borderBottomWidth": 1,
+                  },
+                ],
+              ]
+            }
+            testID={undefined}
+          >
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                  },
+                  Array [
+                    Object {
+                      "borderColor": "#ddd",
+                    },
+                    Object {
+                      "borderRightWidth": 1,
+                      "height": 187.5,
+                    },
+                  ],
+                ]
+              }
+              testID={undefined}
+            />
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                  },
+                  Array [
+                    Object {
+                      "borderColor": "#ddd",
+                    },
+                    Object {
+                      "borderRightWidth": 1,
+                      "height": 187.5,
+                    },
+                  ],
+                ]
+              }
+              testID={undefined}
+            />
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                  },
+                  Array [
+                    Object {
+                      "borderColor": "#ddd",
+                    },
+                    Object {
+                      "borderRightWidth": 1,
+                      "height": 187.5,
+                    },
+                  ],
+                ]
+              }
+              testID={undefined}
+            />
+          </View>
+        </View>
+      </View>
+    </ScrollView>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "position": "absolute",
+            },
+            Object {
+              "bottom": 10,
+              "left": 0,
+              "right": 0,
+            },
+          ],
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            Object {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ccc",
+                "borderRadius": 8,
+                "height": 8,
+                "width": 8,
+              },
+              Object {
+                "marginHorizontal": 2.5,
+                "marginVertical": 3,
+              },
+              Object {
+                "backgroundColor": "#888",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ccc",
+                "borderRadius": 8,
+                "height": 8,
+                "width": 8,
+              },
+              Object {
+                "marginHorizontal": 2.5,
+                "marginVertical": 3,
+              },
+              false,
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</ScrollView>
+`;
diff --git a/components/grid/__tests__/__snapshots__/demo.test.web.js.snap b/components/grid/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..aa024c46921
--- /dev/null
+++ b/components/grid/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,768 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="sub-title"
+  >
+    基本使用
+  </div>
+  <div
+    class="am-grid am-grid-line"
+  >
+    <div
+      class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+    >
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-4"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字0
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-4"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字1
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-4"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字2
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-4"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字3
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+    >
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-4"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字4
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-4"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字5
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-4"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字6
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-4"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字7
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+    >
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-4"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字8
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item"
+        style="width:0px;"
+      />
+      <div
+        class="am-flexbox-item"
+        style="width:0px;"
+      />
+      <div
+        class="am-flexbox-item"
+        style="width:0px;"
+      />
+    </div>
+  </div>
+  <div
+    class="sub-title"
+  >
+    无边线
+  </div>
+  <div
+    class="am-grid"
+  >
+    <div
+      class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+    >
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-3"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字0
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-3"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字1
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-3"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字2
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+    >
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-3"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字3
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-3"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字4
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-3"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字5
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+    >
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-3"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字6
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-3"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字7
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          class="am-grid-item-contain column-num-3"
+          style="height:0px;"
+        >
+          <img
+            class="am-grid-icon"
+            src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+          />
+          <div
+            class="am-grid-text"
+          >
+            名字8
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="sub-title"
+  >
+    走马灯
+  </div>
+  <div
+    class="am-grid am-grid-line"
+  >
+    <div
+      class="slider am-carousel"
+      style="position:relative;display:block;width:100%;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;visibility:hidden;"
+    >
+      <div
+        class="slider-frame"
+        style="position:relative;display:block;overflow:hidden;height:auto;margin:0px;padding:0;transform:translate3d(0, 0, 0);-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate(0, 0);box-sizing:border-box;-moz-box-sizing:border-box;"
+      >
+        <ul
+          class="slider-list"
+          style="transform:translate3d(0px, 0px, 0);-webkit-transform:translate3d(0px, 0px, 0);-ms-transform:translate(0px, 0px);position:relative;display:block;margin:0px 0px;padding:0;height:0;width:0;cursor:inherit;box-sizing:border-box;-moz-box-sizing:border-box;"
+        >
+          <li
+            class="slider-slide"
+            style="position:absolute;left:0;top:0;display:inline-block;list-style-type:none;vertical-align:top;width:0;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;margin-left:0;margin-right:0;margin-top:auto;margin-bottom:auto;"
+          >
+            <div
+              class="am-grid-carousel-page"
+            >
+              <div
+                class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+              >
+                <div
+                  class="am-flexbox-item am-grid-item"
+                  style="width:0px;"
+                >
+                  <div
+                    class="am-grid-item-contain column-num-3"
+                    style="height:0px;"
+                  >
+                    <img
+                      class="am-grid-icon"
+                      src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+                    />
+                    <div
+                      class="am-grid-text"
+                    >
+                      名字0
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="am-flexbox-item am-grid-item"
+                  style="width:0px;"
+                >
+                  <div
+                    class="am-grid-item-contain column-num-3"
+                    style="height:0px;"
+                  >
+                    <img
+                      class="am-grid-icon"
+                      src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+                    />
+                    <div
+                      class="am-grid-text"
+                    >
+                      名字1
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="am-flexbox-item am-grid-item"
+                  style="width:0px;"
+                >
+                  <div
+                    class="am-grid-item-contain column-num-3"
+                    style="height:0px;"
+                  >
+                    <img
+                      class="am-grid-icon"
+                      src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+                    />
+                    <div
+                      class="am-grid-text"
+                    >
+                      名字2
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+              >
+                <div
+                  class="am-flexbox-item am-grid-item"
+                  style="width:0px;"
+                >
+                  <div
+                    class="am-grid-item-contain column-num-3"
+                    style="height:0px;"
+                  >
+                    <img
+                      class="am-grid-icon"
+                      src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+                    />
+                    <div
+                      class="am-grid-text"
+                    >
+                      名字3
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="am-flexbox-item am-grid-item"
+                  style="width:0px;"
+                >
+                  <div
+                    class="am-grid-item-contain column-num-3"
+                    style="height:0px;"
+                  >
+                    <img
+                      class="am-grid-icon"
+                      src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+                    />
+                    <div
+                      class="am-grid-text"
+                    >
+                      名字4
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="am-flexbox-item am-grid-item"
+                  style="width:0px;"
+                >
+                  <div
+                    class="am-grid-item-contain column-num-3"
+                    style="height:0px;"
+                  >
+                    <img
+                      class="am-grid-icon"
+                      src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+                    />
+                    <div
+                      class="am-grid-text"
+                    >
+                      名字5
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li
+            class="slider-slide"
+            style="position:absolute;left:0;top:0;display:inline-block;list-style-type:none;vertical-align:top;width:0;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;margin-left:0;margin-right:0;margin-top:auto;margin-bottom:auto;"
+          >
+            <div
+              class="am-grid-carousel-page"
+            >
+              <div
+                class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+              >
+                <div
+                  class="am-flexbox-item am-grid-item"
+                  style="width:0px;"
+                >
+                  <div
+                    class="am-grid-item-contain column-num-3"
+                    style="height:0px;"
+                  >
+                    <img
+                      class="am-grid-icon"
+                      src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+                    />
+                    <div
+                      class="am-grid-text"
+                    >
+                      名字6
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="am-flexbox-item am-grid-item"
+                  style="width:0px;"
+                >
+                  <div
+                    class="am-grid-item-contain column-num-3"
+                    style="height:0px;"
+                  >
+                    <img
+                      class="am-grid-icon"
+                      src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+                    />
+                    <div
+                      class="am-grid-text"
+                    >
+                      名字7
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="am-flexbox-item am-grid-item"
+                  style="width:0px;"
+                >
+                  <div
+                    class="am-grid-item-contain column-num-3"
+                    style="height:0px;"
+                  >
+                    <img
+                      class="am-grid-icon"
+                      src="https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png"
+                    />
+                    <div
+                      class="am-grid-text"
+                    >
+                      名字8
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div />
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div
+        class="slider-decorator-0"
+        style="position:absolute;bottom:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);"
+      >
+        <div
+          class="am-carousel-wrap"
+        >
+          <div
+            class="am-carousel-wrap-dot am-carousel-wrap-dot-active"
+          >
+            <span />
+          </div>
+          <div
+            class="am-carousel-wrap-dot"
+          >
+            <span />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="sub-title"
+  >
+    自定义格子内容
+  </div>
+  <div
+    class="am-grid"
+  >
+    <div
+      class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+    >
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          style="margin:0.16rem;background:#f7f7f7;text-align:center;"
+        >
+          <div
+            style="background:rgba(0, 0, 0, 0.1);padding:0.08rem;"
+          >
+            <span>
+              1.名字0
+            </span>
+          </div>
+          <img
+            src="https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png"
+            style="width:80%;margin:0.12rem;"
+          />
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          style="margin:0.16rem;background:#f7f7f7;text-align:center;"
+        >
+          <div
+            style="background:rgba(0, 0, 0, 0.1);padding:0.08rem;"
+          >
+            <span>
+              2.名字1
+            </span>
+          </div>
+          <img
+            src="https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png"
+            style="width:80%;margin:0.12rem;"
+          />
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          style="margin:0.16rem;background:#f7f7f7;text-align:center;"
+        >
+          <div
+            style="background:rgba(0, 0, 0, 0.1);padding:0.08rem;"
+          >
+            <span>
+              3.名字2
+            </span>
+          </div>
+          <img
+            src="https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png"
+            style="width:80%;margin:0.12rem;"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+    >
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          style="margin:0.16rem;background:#f7f7f7;text-align:center;"
+        >
+          <div
+            style="background:rgba(0, 0, 0, 0.1);padding:0.08rem;"
+          >
+            <span>
+              4.名字3
+            </span>
+          </div>
+          <img
+            src="https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png"
+            style="width:80%;margin:0.12rem;"
+          />
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item am-grid-item"
+        style="width:0px;"
+      >
+        <div
+          style="margin:0.16rem;background:#f7f7f7;text-align:center;"
+        >
+          <div
+            style="background:rgba(0, 0, 0, 0.1);padding:0.08rem;"
+          >
+            <span>
+              5.名字4
+            </span>
+          </div>
+          <img
+            src="https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png"
+            style="width:80%;margin:0.12rem;"
+          />
+        </div>
+      </div>
+      <div
+        class="am-flexbox-item"
+        style="width:0px;"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/grid/__tests__/demo.test.js b/components/grid/__tests__/demo.test.js
new file mode 100644
index 00000000000..57ffacb2677
--- /dev/null
+++ b/components/grid/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('grid');
diff --git a/components/grid/__tests__/demo.test.web.js b/components/grid/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..ed83c471c29
--- /dev/null
+++ b/components/grid/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('grid');
diff --git a/components/icon/__tests__/__snapshots__/demo.test.js.snap b/components/icon/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..b7c2ab6acc1
--- /dev/null
+++ b/components/icon/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,1477 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/icon/demo/basic.tsx correctly 1`] = `
+<View
+  accessibilityComponentType={undefined}
+  accessibilityLabel={undefined}
+  accessibilityTraits={undefined}
+  accessible={true}
+  hitSlop={undefined}
+  onLayout={undefined}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "column",
+        "flexWrap": "nowrap",
+        "justifyContent": "flex-start",
+      },
+      undefined,
+    ]
+  }
+  testID={undefined}
+>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "flexWrap": "nowrap",
+          "justifyContent": "flex-start",
+        },
+        Array [
+          Object {
+            "borderColor": "#ddd",
+          },
+          Object {
+            "borderBottomWidth": 0,
+            "borderTopWidth": 0,
+          },
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          check-circle
+        </Text>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          check
+        </Text>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          check-circle-o
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "flexWrap": "nowrap",
+          "justifyContent": "flex-start",
+        },
+        Array [
+          Object {
+            "borderColor": "#ddd",
+          },
+          Object {
+            "borderBottomWidth": 0,
+            "borderTopWidth": 0,
+          },
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          cross-circle
+        </Text>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          cross
+        </Text>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          cross-circle-o
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "flexWrap": "nowrap",
+          "justifyContent": "flex-start",
+        },
+        Array [
+          Object {
+            "borderColor": "#ddd",
+          },
+          Object {
+            "borderBottomWidth": 0,
+            "borderTopWidth": 0,
+          },
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          up
+        </Text>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          down
+        </Text>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          left
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "flexWrap": "nowrap",
+          "justifyContent": "flex-start",
+        },
+        Array [
+          Object {
+            "borderColor": "#ddd",
+          },
+          Object {
+            "borderBottomWidth": 0,
+            "borderTopWidth": 0,
+          },
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          right
+        </Text>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          ellipsis
+        </Text>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 22,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          loading
+        </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "flexWrap": "nowrap",
+          "justifyContent": "flex-start",
+        },
+        Array [
+          Object {
+            "borderColor": "#ddd",
+          },
+          Object {
+            "borderBottomWidth": 0,
+            "borderTopWidth": 0,
+          },
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+            Object {
+              "borderLeftWidth": 0,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "column",
+              "flexWrap": "nowrap",
+              "justifyContent": "center",
+            },
+            Object {
+              "flex": 1,
+            },
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "red",
+              "flexDirection": "row",
+              "fontFamily": "anticon",
+              "fontSize": 55,
+            }
+          }
+        >
+          
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "color": "#000",
+              "fontSize": 12,
+              "marginTop": 9,
+            }
+          }
+        >
+          自定义图标
+        </Text>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+          },
+          Array [
+            Object {
+              "borderColor": "#ddd",
+            },
+            Object {
+              "borderRightWidth": 0,
+              "height": 187.5,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    />
+  </View>
+</View>
+`;
diff --git a/components/icon/__tests__/__snapshots__/demo.test.web.js.snap b/components/icon/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..e85fbfcc7d6
--- /dev/null
+++ b/components/icon/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,479 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/icon/demo/basic.md correctly 1`] = `
+<div
+  class="am-grid"
+>
+  <div
+    class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+  >
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-check-circle am-icon-md"
+        >
+          <use
+            xlink:href="#check-circle"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          check-circle
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-check am-icon-md"
+        >
+          <use
+            xlink:href="#check"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          check
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-check-circle-o am-icon-md"
+        >
+          <use
+            xlink:href="#check-circle-o"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          check-circle-o
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+  >
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-cross-circle am-icon-md"
+        >
+          <use
+            xlink:href="#cross-circle"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          cross-circle
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-cross am-icon-md"
+        >
+          <use
+            xlink:href="#cross"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          cross
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-cross-circle-o am-icon-md"
+        >
+          <use
+            xlink:href="#cross-circle-o"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          cross-circle-o
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+  >
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-up am-icon-md"
+        >
+          <use
+            xlink:href="#up"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          up
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-down am-icon-md"
+        >
+          <use
+            xlink:href="#down"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          down
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-left am-icon-md"
+        >
+          <use
+            xlink:href="#left"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          left
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+  >
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-right am-icon-md"
+        >
+          <use
+            xlink:href="#right"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          right
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-ellipsis am-icon-md"
+        >
+          <use
+            xlink:href="#ellipsis"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          ellipsis
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-koubei-o am-icon-md"
+        >
+          <use
+            xlink:href="#koubei-o"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          koubei-o
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+  >
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-koubei am-icon-md"
+        >
+          <use
+            xlink:href="#koubei"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          koubei
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-loading am-icon-md"
+        >
+          <use
+            xlink:href="#loading"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          loading
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-3"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-[object Object] am-icon-md"
+        >
+          <use
+            xlink:href="#[object Object]"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          自定义图标
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/icon/demo/size.md correctly 1`] = `
+<div
+  class="am-grid"
+>
+  <div
+    class="am-flexbox am-flexbox-justify-center am-flexbox-align-stretch"
+  >
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-5"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-search am-icon-xxs"
+        >
+          <use
+            xlink:href="#search"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          xxs
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-5"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-search am-icon-xs"
+        >
+          <use
+            xlink:href="#search"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          xs
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-5"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-search am-icon-sm"
+        >
+          <use
+            xlink:href="#search"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          sm
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-5"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-search am-icon-md"
+        >
+          <use
+            xlink:href="#search"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          md
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-flexbox-item am-grid-item"
+      style="width:0px;"
+    >
+      <div
+        class="am-grid-item-contain column-num-5"
+        style="height:0px;"
+      >
+        <svg
+          class="am-icon am-icon-search am-icon-lg"
+        >
+          <use
+            xlink:href="#search"
+          />
+        </svg>
+        <div
+          class="am-grid-text"
+        >
+          lg
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/icon/__tests__/demo.test.js b/components/icon/__tests__/demo.test.js
new file mode 100644
index 00000000000..9a9537e4f37
--- /dev/null
+++ b/components/icon/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('icon');
diff --git a/components/icon/__tests__/demo.test.web.js b/components/icon/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..cdbe21e5145
--- /dev/null
+++ b/components/icon/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('icon');
diff --git a/components/image-picker/__tests__/__snapshots__/demo.test.js.snap b/components/image-picker/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..a0867652075
--- /dev/null
+++ b/components/image-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,647 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/image-picker/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "marginLeft": 20,
+      "marginTop": 20,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "marginBottom": 6,
+            "marginRight": 5,
+            "overflow": "hidden",
+          },
+          Object {
+            "height": 80,
+            "width": 80,
+          },
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "height": 80,
+              "width": 80,
+            },
+            Object {
+              "borderRadius": 3,
+              "overflow": "hidden",
+            },
+          ]
+        }
+      />
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#999",
+            "borderRadius": 8,
+            "height": 16,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "position": "absolute",
+            "right": 4,
+            "top": 4,
+            "width": 16,
+          }
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "backgroundColor": "transparent",
+              "color": "#fff",
+              "fontSize": 20,
+              "fontWeight": "300",
+              "height": 20,
+              "marginTop": -8,
+            }
+          }
+        >
+          ×
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginBottom": 6,
+            "marginRight": 5,
+            "overflow": "hidden",
+          },
+          Object {
+            "height": 80,
+            "width": 80,
+          },
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "height": 80,
+              "width": 80,
+            },
+            Object {
+              "borderRadius": 3,
+              "overflow": "hidden",
+            },
+          ]
+        }
+      />
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#999",
+            "borderRadius": 8,
+            "height": 16,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "position": "absolute",
+            "right": 4,
+            "top": 4,
+            "width": 16,
+          }
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "backgroundColor": "transparent",
+              "color": "#fff",
+              "fontSize": 20,
+              "fontWeight": "300",
+              "height": 20,
+              "marginTop": -8,
+            }
+          }
+        >
+          ×
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginBottom": 6,
+            "marginRight": 5,
+            "overflow": "hidden",
+          },
+          Object {
+            "height": 80,
+            "width": 80,
+          },
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "height": 80,
+              "width": 80,
+            },
+            Object {
+              "borderRadius": 3,
+              "overflow": "hidden",
+            },
+          ]
+        }
+      />
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#999",
+            "borderRadius": 8,
+            "height": 16,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "position": "absolute",
+            "right": 4,
+            "top": 4,
+            "width": 16,
+          }
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "backgroundColor": "transparent",
+              "color": "#fff",
+              "fontSize": 20,
+              "fontWeight": "300",
+              "height": 20,
+              "marginTop": -8,
+            }
+          }
+        >
+          ×
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginBottom": 6,
+            "marginRight": 5,
+            "overflow": "hidden",
+          },
+          Object {
+            "height": 80,
+            "width": 80,
+          },
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "height": 80,
+              "width": 80,
+            },
+            Object {
+              "borderRadius": 3,
+              "overflow": "hidden",
+            },
+          ]
+        }
+      />
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#999",
+            "borderRadius": 8,
+            "height": 16,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "position": "absolute",
+            "right": 4,
+            "top": 4,
+            "width": 16,
+          }
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "backgroundColor": "transparent",
+              "color": "#fff",
+              "fontSize": 20,
+              "fontWeight": "300",
+              "height": 20,
+              "marginTop": -8,
+            }
+          }
+        >
+          ×
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginBottom": 6,
+            "marginRight": 5,
+            "overflow": "hidden",
+          },
+          Object {
+            "height": 80,
+            "width": 80,
+          },
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "height": 80,
+              "width": 80,
+            },
+            Object {
+              "borderRadius": 3,
+              "overflow": "hidden",
+            },
+          ]
+        }
+      />
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#999",
+            "borderRadius": 8,
+            "height": 16,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "position": "absolute",
+            "right": 4,
+            "top": 4,
+            "width": 16,
+          }
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "backgroundColor": "transparent",
+              "color": "#fff",
+              "fontSize": 20,
+              "fontWeight": "300",
+              "height": 20,
+              "marginTop": -8,
+            }
+          }
+        >
+          ×
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginBottom": 6,
+            "marginRight": 5,
+            "overflow": "hidden",
+          },
+          Object {
+            "height": 80,
+            "width": 80,
+          },
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "height": 80,
+              "width": 80,
+            },
+            Object {
+              "borderRadius": 3,
+              "overflow": "hidden",
+            },
+          ]
+        }
+      />
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#999",
+            "borderRadius": 8,
+            "height": 16,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "position": "absolute",
+            "right": 4,
+            "top": 4,
+            "width": 16,
+          }
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Object {
+              "backgroundColor": "transparent",
+              "color": "#fff",
+              "fontSize": 20,
+              "fontWeight": "300",
+              "height": 20,
+              "marginTop": -8,
+            }
+          }
+        >
+          ×
+        </Text>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "marginBottom": 6,
+            "marginRight": 5,
+            "overflow": "hidden",
+          },
+          Object {
+            "height": 80,
+            "width": 80,
+          },
+          Object {
+            "alignItems": "center",
+            "borderRadius": 3,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            undefined,
+            Object {
+              "backgroundColor": "transparent",
+              "color": "#888",
+              "fontSize": 64,
+              "fontWeight": "100",
+            },
+          ]
+        }
+      >
+        +
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+      }
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "marginBottom": 6,
+            "marginRight": 5,
+            "overflow": "hidden",
+          },
+          Object {
+            "height": 80,
+            "width": 80,
+          },
+          Object {
+            "alignItems": "center",
+            "borderRadius": 3,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            undefined,
+            Object {
+              "backgroundColor": "transparent",
+              "color": "#888",
+              "fontSize": 64,
+              "fontWeight": "100",
+            },
+          ]
+        }
+      >
+        +
+      </Text>
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/image-picker/__tests__/__snapshots__/demo.test.web.js.snap b/components/image-picker/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..ce194a0ea5b
--- /dev/null
+++ b/components/image-picker/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/image-picker/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-image-picker"
+  >
+    <div
+      class="am-image-picker-list"
+    >
+      <div
+        class="am-wingblank am-wingblank-md"
+      >
+        <div
+          class="am-flexbox am-flexbox-wrap am-flexbox-align-middle"
+        >
+          <div
+            class="am-image-picker-item"
+            style="width:-9px;height:-9px;"
+          >
+            <div
+              class="am-image-picker-item-remove"
+            />
+            <div
+              class="am-image-picker-item-content"
+              style="background-image:url(https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg);"
+            />
+          </div>
+          <div
+            class="am-image-picker-item"
+            style="width:-9px;height:-9px;"
+          >
+            <div
+              class="am-image-picker-item-remove"
+            />
+            <div
+              class="am-image-picker-item-content"
+              style="background-image:url(https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg);"
+            />
+          </div>
+          <div
+            class="am-image-picker-item am-image-picker-upload-btn"
+            style="width:-9px;height:-9px;"
+          >
+            <input
+              accept="image/jpg,image/jpeg,image/png,image/gif"
+              style="width:-9px;height:-9px;"
+              type="file"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/image-picker/demo/custom.md correctly 1`] = `
+<div>
+  <div
+    class="am-image-picker"
+  >
+    <div
+      class="am-image-picker-list"
+    >
+      <div
+        class="am-wingblank am-wingblank-md"
+      >
+        <div
+          class="am-flexbox am-flexbox-wrap am-flexbox-align-middle"
+        >
+          <div
+            class="am-image-picker-item"
+            style="width:-9px;height:-9px;"
+          >
+            <div
+              class="am-image-picker-item-remove"
+            />
+            <div
+              class="am-image-picker-item-content"
+              style="background-image:url(https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg);"
+            />
+          </div>
+          <div
+            class="am-image-picker-item"
+            style="width:-9px;height:-9px;"
+          >
+            <div
+              class="am-image-picker-item-remove"
+            />
+            <div
+              class="am-image-picker-item-content"
+              style="background-image:url(https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg);"
+            />
+          </div>
+          <div
+            class="am-image-picker-item am-image-picker-upload-btn"
+            style="width:-9px;height:-9px;"
+          >
+            <input
+              accept="image/jpg,image/jpeg,image/png,image/gif"
+              style="width:-9px;height:-9px;"
+              type="file"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/image-picker/__tests__/demo.test.js b/components/image-picker/__tests__/demo.test.js
new file mode 100644
index 00000000000..fc3ed4abb0e
--- /dev/null
+++ b/components/image-picker/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('image-picker');
diff --git a/components/image-picker/__tests__/demo.test.web.js b/components/image-picker/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..79a154c1312
--- /dev/null
+++ b/components/image-picker/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('image-picker');
diff --git a/components/input-item/__tests__/__snapshots__/demo.test.js.snap b/components/input-item/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..3dd4e4a66d0
--- /dev/null
+++ b/components/input-item/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,1332 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/input-item/demo/basic.tsx correctly 1`] = `
+<ScrollView
+  automaticallyAdjustContentInsets={false}
+  showsHorizontalScrollIndicator={false}
+  showsVerticalScrollIndicator={false}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={undefined}
+  >
+    <View>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "backgroundColor": "#f5f5f9",
+            "color": "#888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+            "paddingTop": 15,
+          }
+        }
+      >
+        基本
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#ddd",
+          "borderTopWidth": 0.5,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000",
+                "fontSize": 17,
+                "marginRight": 5,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "width": 71.4,
+              },
+            ]
+          }
+        >
+          输入框
+        </Text>
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={true}
+          focused={false}
+          keyboardType="default"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onErrorPress={[Function]}
+          onFocus={[Function]}
+          placeholder="有标签"
+          secureTextEntry={false}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#f50",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+          value=""
+        />
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={undefined}
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#888",
+                  "fontSize": 15,
+                  "marginLeft": 5,
+                },
+                Object {
+                  "width": 17,
+                },
+              ]
+            }
+          >
+            元
+          </Text>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "height": 21,
+                "marginLeft": 5,
+                "width": 21,
+              },
+            ]
+          }
+          testID={undefined}
+        >
+          <Image
+            source={1}
+            style={
+              Object {
+                "height": 18,
+                "width": 18,
+              }
+            }
+          />
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000",
+                "fontSize": 17,
+                "marginRight": 5,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "width": 71.4,
+              },
+            ]
+          }
+        >
+          输入框
+        </Text>
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={false}
+          focused={false}
+          keyboardType="default"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onErrorPress={[Function]}
+          onFocus={[Function]}
+          placeholder="不可编辑"
+          secureTextEntry={false}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#000",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+          value="不可编辑"
+        />
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={undefined}
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+          >
+            元
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={true}
+          focused={false}
+          keyboardType="default"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="无标签"
+          secureTextEntry={false}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#000",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+          value=""
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000",
+                "fontSize": 17,
+                "marginRight": 5,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "width": 71.4,
+              },
+            ]
+          }
+        >
+          标题
+        </Text>
+        <TextInput
+          autoFocus={true}
+          clearButtonMode="while-editing"
+          defaultValue="xx"
+          editable={true}
+          focused={false}
+          keyboardType="default"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="自动获取光标"
+          secureTextEntry={false}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#000",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000",
+                "fontSize": 17,
+                "marginRight": 5,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "width": 71.4,
+              },
+            ]
+          }
+        >
+          标题
+        </Text>
+        <TextInput
+          clearButtonMode="while-editing"
+          defaultValue={undefined}
+          editable={true}
+          focused={false}
+          keyboardType="default"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="点击下方按钮该输入框会获取光标"
+          secureTextEntry={false}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#000",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+        />
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "transparent",
+                    },
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "borderRadius": 5,
+                        "borderWidth": 1,
+                        "justifyContent": "center",
+                      },
+                      Object {
+                        "height": 42,
+                        "paddingLeft": 15,
+                        "paddingRight": 15,
+                      },
+                      Object {
+                        "backgroundColor": "#108ee9",
+                        "borderColor": "#108ee9",
+                      },
+                      false,
+                      false,
+                      false,
+                      undefined,
+                    ],
+                  ]
+                }
+                testID={undefined}
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Array [
+                      Object {
+                        "fontSize": 18,
+                      },
+                      Object {
+                        "color": "#fff",
+                      },
+                      false,
+                      false,
+                    ]
+                  }
+                >
+                  点击获取光标
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#fff",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "bottom": 0,
+              "height": 1,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={undefined}
+  >
+    <View>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "backgroundColor": "#f5f5f9",
+            "color": "#888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+            "paddingTop": 15,
+          }
+        }
+      >
+        固定标签字数
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#ddd",
+          "borderTopWidth": 0.5,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000",
+                "fontSize": 17,
+                "marginRight": 5,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "width": 35.7,
+              },
+            ]
+          }
+        >
+          姓名
+        </Text>
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={true}
+          focused={false}
+          keyboardType="default"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="两个字标签"
+          secureTextEntry={false}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#000",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+          value=""
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000",
+                "fontSize": 17,
+                "marginRight": 5,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "width": 53.550000000000004,
+              },
+            ]
+          }
+        >
+          校验码
+        </Text>
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={true}
+          focused={false}
+          keyboardType="default"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="三个字标签"
+          secureTextEntry={false}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#000",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+          value=""
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000",
+                "fontSize": 17,
+                "marginRight": 5,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "width": 71.4,
+              },
+            ]
+          }
+        >
+          四字标签
+        </Text>
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={true}
+          focused={false}
+          keyboardType="default"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="四个字标签（默认）"
+          secureTextEntry={false}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#000",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+          value=""
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#fff",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "bottom": 0,
+              "height": 1,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={undefined}
+  >
+    <View>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "backgroundColor": "#f5f5f9",
+            "color": "#888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+            "paddingTop": 15,
+          }
+        }
+      >
+        格式
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#ddd",
+          "borderTopWidth": 0.5,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000",
+                "fontSize": 17,
+                "marginRight": 5,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "width": 71.4,
+              },
+            ]
+          }
+        >
+          文本输入
+        </Text>
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={true}
+          focused={false}
+          keyboardType="default"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="text"
+          secureTextEntry={false}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#f50",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+          value=""
+        />
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "height": 21,
+                "marginLeft": 5,
+                "width": 21,
+              },
+            ]
+          }
+          testID={undefined}
+        >
+          <Image
+            source={1}
+            style={
+              Object {
+                "height": 18,
+                "width": 18,
+              }
+            }
+          />
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000",
+                "fontSize": 17,
+                "marginRight": 5,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "width": 71.4,
+              },
+            ]
+          }
+        >
+          银行卡
+        </Text>
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={true}
+          focused={false}
+          keyboardType="numeric"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="bankCard"
+          secureTextEntry={false}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#000",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+          value=""
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000",
+                "fontSize": 17,
+                "marginRight": 5,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "width": 71.4,
+              },
+            ]
+          }
+        >
+          手机号
+        </Text>
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={true}
+          focused={false}
+          keyboardType="default"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="phone"
+          secureTextEntry={false}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#000",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+          value=""
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000",
+                "fontSize": 17,
+                "marginRight": 5,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "width": 71.4,
+              },
+            ]
+          }
+        >
+          密码
+        </Text>
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={true}
+          focused={false}
+          keyboardType="default"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="password"
+          secureTextEntry={true}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#000",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+          value=""
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "flexDirection": "row",
+              "height": 45.5,
+              "marginBottom": 0,
+              "marginLeft": 15,
+              "marginTop": 0,
+              "paddingRight": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000",
+                "fontSize": 17,
+                "marginRight": 5,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "width": 71.4,
+              },
+            ]
+          }
+        >
+          数字
+        </Text>
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={true}
+          focused={false}
+          keyboardType="numeric"
+          labelPosition="left"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="number"
+          secureTextEntry={false}
+          size="large"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 45,
+              },
+              Object {
+                "color": "#000",
+              },
+            ]
+          }
+          textAlign="left"
+          underlineColorAndroid="transparent"
+          value=""
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#fff",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "bottom": 0,
+              "height": 1,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+</ScrollView>
+`;
diff --git a/components/input-item/__tests__/__snapshots__/demo.test.web.js.snap b/components/input-item/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..d08a8d6ff00
--- /dev/null
+++ b/components/input-item/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,420 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/input-item/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      自定义获取光标
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          标题
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder="自动获取光标"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          标题
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder="点击下方按钮该输入框会获取光标"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            <div
+              style="width:100%;color:#108ee9;text-align:center;"
+            >
+              点击获取光标
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      受控 / 非受控
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          受控组件
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder="Hello World"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          非受控组件
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            data-seed="logId"
+            placeholder="请输入内容"
+            type="text"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      带清除按钮
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          标题
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder="带清除按钮，输入会显示"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      标题字数
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          标题过长超过默认的5个字
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder="限制标题显示的长度"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      标题可自定义（文字 / 图片 / 无标题）
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder="无 label"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          <div
+            style="background-image:url(https://zos.alipayobjects.com/rmsportal/DfkJHaJGgMghpXdqNaKF.png);background-size:cover;height:0.44rem;width:0.44rem;"
+          />
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder="标题可自定义为icon，图片或文字"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      右侧注释可自定义
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          价格
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder="0.00"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="am-input-extra"
+        >
+          元
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      格式
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          银行卡
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder=""
+            type="tel"
+            value="8888 8888 8888 8888"
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          手机号码
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder="186 1234 1234"
+            type="tel"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          密码
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder="****"
+            type="password"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          数字键盘
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            pattern="[0-9]*"
+            placeholder="点击会弹出数字键盘"
+            type="number"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      不可编辑 / 禁用
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          姓名
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder=""
+            readonly=""
+            type="text"
+            value="不可编辑"
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-input-item am-input-disabled"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          姓名
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            disabled=""
+            placeholder=""
+            type="text"
+            value="这个是禁用状态的样式"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/input-item/__tests__/demo.test.js b/components/input-item/__tests__/demo.test.js
new file mode 100644
index 00000000000..9a361da111d
--- /dev/null
+++ b/components/input-item/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('input-item');
diff --git a/components/input-item/__tests__/demo.test.web.js b/components/input-item/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..9538b65a219
--- /dev/null
+++ b/components/input-item/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('input-item');
diff --git a/components/list-view/__tests__/__snapshots__/demo.test.js.snap b/components/list-view/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..78662385dc4
--- /dev/null
+++ b/components/list-view/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,2871 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/list-view/demo/basic.tsx correctly 1`] = `
+<ScrollView
+  dataSource={
+    ListViewDataSource {
+      "items": 195,
+    }
+  }
+  initialListSize={10}
+  onContentSizeChange={[Function]}
+  onEndReached={[Function]}
+  onEndReachedThreshold={10}
+  onKeyboardDidHide={undefined}
+  onKeyboardDidShow={undefined}
+  onKeyboardWillHide={undefined}
+  onKeyboardWillShow={undefined}
+  onLayout={[Function]}
+  onScroll={[Function]}
+  pageSize={4}
+  removeClippedSubviews={true}
+  renderFooter={[Function]}
+  renderHeader={[Function]}
+  renderRow={[Function]}
+  renderSectionHeader={[Function]}
+  renderSeparator={[Function]}
+  scrollEventThrottle={50}
+  scrollRenderAheadDistance={1000}
+  stickyHeaderIndices={
+    Array [
+      1,
+      11,
+    ]
+  }
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "padding": 8,
+        },
+      ]
+    }
+  >
+    列表头
+  </Text>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "backgroundColor": "rgba(255,255,255,0.8)",
+          "padding": 10,
+        },
+      ]
+    }
+  >
+    任务 0
+  </Text>
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            食惠周
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              S0, R0
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            麦当劳邀您过周末
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              S0, R1
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            相约酒店
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              S0, R2
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            食惠周
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              S0, R3
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            麦当劳邀您过周末
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              S0, R4
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "backgroundColor": "rgba(255,255,255,0.8)",
+          "padding": 10,
+        },
+      ]
+    }
+  >
+    任务 1
+  </Text>
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            相约酒店
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              S1, R0
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            食惠周
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              S1, R1
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            麦当劳邀您过周末
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              S1, R2
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            相约酒店
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              S1, R3
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            食惠周
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              S1, R4
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "padding": 30,
+          "textAlign": "center",
+        },
+      ]
+    }
+  >
+     
+    加载完毕
+     
+  </Text>
+</ScrollView>
+`;
+
+exports[`renders ./components/list-view/demo/basic-row.tsx correctly 1`] = `
+<ScrollView
+  dataSource={
+    ListViewDataSource {
+      "items": NaN,
+    }
+  }
+  initialListSize={10}
+  onContentSizeChange={[Function]}
+  onEndReached={[Function]}
+  onEndReachedThreshold={10}
+  onKeyboardDidHide={undefined}
+  onKeyboardDidShow={undefined}
+  onKeyboardWillHide={undefined}
+  onKeyboardWillShow={undefined}
+  onLayout={[Function]}
+  onScroll={[Function]}
+  pageSize={4}
+  removeClippedSubviews={true}
+  renderFooter={[Function]}
+  renderHeader={[Function]}
+  renderRow={[Function]}
+  renderSeparator={[Function]}
+  scrollEventThrottle={20}
+  scrollRenderAheadDistance={500}
+  stickyHeaderIndices={Array []}
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "padding": 8,
+        },
+      ]
+    }
+  >
+    列表头
+  </Text>
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            食惠周
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              0
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            麦当劳邀您过周末
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              1
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            相约酒店
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              2
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            食惠周
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              3
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            麦当劳邀您过周末
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              4
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            相约酒店
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              5
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            食惠周
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              6
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            麦当劳邀您过周末
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              7
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            相约酒店
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              8
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "padding": 8,
+            },
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#F6F6F6",
+                "borderBottomWidth": 1,
+                "borderStyle": "solid",
+                "marginBottom": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "fontSize": 18,
+                "fontWeight": "500",
+                "padding": 2,
+              }
+            }
+          >
+            食惠周
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 64,
+                  "marginRight": 8,
+                  "width": 64,
+                },
+              ]
+            }
+          />
+          <View>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              不是所有的兼职汪都需要风吹日晒
+               - 
+              9
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            />
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#FF6E27",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                35
+              </Text>
+              元/任务
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#F5F5F9",
+        "borderBottomColor": "#ECECED",
+        "borderBottomWidth": 1,
+        "borderStyle": "solid",
+        "borderTopColor": "#ECECED",
+        "borderTopWidth": 1,
+        "height": 8,
+      }
+    }
+  />
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Object {
+        "padding": 30,
+        "textAlign": "center",
+      }
+    }
+  >
+     
+    加载完毕
+     
+  </Text>
+</ScrollView>
+`;
diff --git a/components/list-view/__tests__/__snapshots__/demo.test.web.js.snap b/components/list-view/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..983ff696dd5
--- /dev/null
+++ b/components/list-view/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,1022 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/list-view/demo/basic.md correctly 1`] = `
+<div
+  style="margin:0 auto;width:96%;"
+>
+  <div
+    class="fortest am-list-view-scrollview"
+    style="position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1;height:0;border:1px solid #ddd;margin:0.1rem 0;"
+  >
+    <div
+      class="am-list-view-scrollview-content am-list"
+      style="position:absolute;min-width:100%;"
+    >
+      <div
+        class="am-list-header"
+      >
+        <span>
+          header
+        </span>
+      </div>
+      <div
+        class="am-list-body my-body"
+      >
+        <span
+          style="display:none;"
+        >
+          you can custom body wrap element
+        </span>
+      </div>
+      <div
+        class="am-list-footer"
+      >
+        <div
+          style="padding:30px;text-align:center;"
+        >
+          加载中...
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/list-view/demo/basic-body.md correctly 1`] = `
+<div
+  class="am-list am-list-view-scrollview"
+>
+  <div
+    class="am-list-header"
+  >
+    <span>
+      header
+    </span>
+  </div>
+  <div
+    class="am-list-body"
+  />
+  <div
+    class="am-list-footer"
+  >
+    <div
+      style="padding:30px;text-align:center;"
+    >
+      加载中...
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/list-view/demo/basic-sticky.md correctly 1`] = `
+<div
+  class="am-list am-list-view-scrollview"
+>
+  <div
+    class="am-list-header"
+  >
+    <span>
+      header
+    </span>
+  </div>
+  <div
+    class="for-stickyContainer-demo"
+  >
+    <div
+      class="am-list-body"
+    />
+  </div>
+  <div
+    class="am-list-footer"
+  >
+    <div
+      style="padding:30px;text-align:center;"
+    >
+      加载中...
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/list-view/demo/idxed.md correctly 1`] = `
+<div
+  class="am-indexed-list-container"
+>
+  <div
+    class="fortest am-indexed-list am-list-view-scrollview"
+    style="position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1;height:0;"
+  >
+    <div
+      class="am-list-view-scrollview-content am-list"
+      style="position:absolute;min-width:100%;"
+    >
+      <div
+        class="am-list-header"
+      >
+        <span>
+          头部内容请自定义
+        </span>
+      </div>
+      <div
+        class="am-list-body"
+      >
+        <div
+          class="am-indexed-list-section-header am-list-body"
+        >
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                <div
+                  class="ih"
+                >
+                  A
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="am-indexed-list-section-body am-list-body"
+        >
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                安徽省
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                安徽省0
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                安徽省1
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                安徽省2
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                安徽省3
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                安徽省4
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                安徽省5
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                安徽省6
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                安徽省7
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                安徽省8
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                安徽省9
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="am-indexed-list-section-header am-list-body"
+        >
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                <div
+                  class="ih"
+                >
+                  B
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="am-indexed-list-section-body am-list-body"
+        >
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                北京市
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                北京市0
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                北京市1
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                北京市2
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                北京市3
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                北京市4
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                北京市5
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                北京市6
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                北京市7
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-list-footer"
+      >
+        <span>
+          尾部内容请自定义
+        </span>
+      </div>
+    </div>
+  </div>
+  <ul
+    class="am-indexed-list-quick-search-bar"
+    style="position:absolute;top:20px;"
+  >
+    <li
+      data-qf-target="#"
+    >
+      #
+    </li>
+    <li
+      data-qf-target="A"
+    >
+      A
+    </li>
+    <li
+      data-qf-target="B"
+    >
+      B
+    </li>
+    <li
+      data-qf-target="C"
+    >
+      C
+    </li>
+    <li
+      data-qf-target="F"
+    >
+      F
+    </li>
+    <li
+      data-qf-target="G"
+    >
+      G
+    </li>
+    <li
+      data-qf-target="H"
+    >
+      H
+    </li>
+    <li
+      data-qf-target="J"
+    >
+      J
+    </li>
+    <li
+      data-qf-target="L"
+    >
+      L
+    </li>
+    <li
+      data-qf-target="N"
+    >
+      N
+    </li>
+    <li
+      data-qf-target="Q"
+    >
+      Q
+    </li>
+    <li
+      data-qf-target="S"
+    >
+      S
+    </li>
+    <li
+      data-qf-target="T"
+    >
+      T
+    </li>
+    <li
+      data-qf-target="X"
+    >
+      X
+    </li>
+    <li
+      data-qf-target="Y"
+    >
+      Y
+    </li>
+    <li
+      data-qf-target="Z"
+    >
+      Z
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`renders ./components/list-view/demo/idxed-sticky.md correctly 1`] = `
+<div
+  style="padding-top:0.88rem;position:relative;"
+>
+  <div
+    style="position:absolute;top:0;left:0;right:0;"
+  >
+    <form
+      class="am-search"
+    >
+      <div
+        class="am-search-input"
+      >
+        <div
+          class="am-search-synthetic-ph"
+        >
+          <span
+            class="am-search-synthetic-ph-container"
+          >
+            <i
+              class="am-search-synthetic-ph-icon"
+            />
+            <span
+              class="am-search-synthetic-ph-placeholder"
+              style="visibility:visible;"
+            >
+              搜索
+            </span>
+          </span>
+        </div>
+        <input
+          class="am-search-value"
+          placeholder="搜索"
+          type="search"
+          value=""
+        />
+        <a
+          class="am-search-clear"
+        />
+      </div>
+      <div
+        class="am-search-cancel"
+      >
+        取消
+      </div>
+    </form>
+  </div>
+  <div
+    class="am-indexed-list-container"
+  >
+    <div
+      class="am-list am-indexed-list am-list-view-scrollview"
+    >
+      <div
+        class="am-list-header"
+      >
+        <span>
+          头部内容请自定义
+        </span>
+      </div>
+      <div>
+        <div
+          class="am-list-body"
+        >
+          <div>
+            <div
+              style="padding-bottom:0;"
+            />
+            <div
+              class=""
+              style="transform:translateZ(0);"
+            >
+              <div
+                class="am-indexed-list-section-header am-list-body"
+              >
+                <div
+                  class="am-list-item am-list-item-middle"
+                >
+                  <div
+                    class="am-list-line"
+                  >
+                    <div
+                      class="am-list-content"
+                    >
+                      <div
+                        class="ih"
+                      >
+                        A
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-indexed-list-section-body am-list-body"
+          >
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  安徽省
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  安徽省0
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  安徽省1
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  安徽省2
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  安徽省3
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  安徽省4
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  安徽省5
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  安徽省6
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  安徽省7
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  安徽省8
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  安徽省9
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div
+              style="padding-bottom:0;"
+            />
+            <div
+              class=""
+              style="transform:translateZ(0);"
+            >
+              <div
+                class="am-indexed-list-section-header am-list-body"
+              >
+                <div
+                  class="am-list-item am-list-item-middle"
+                >
+                  <div
+                    class="am-list-line"
+                  >
+                    <div
+                      class="am-list-content"
+                    >
+                      <div
+                        class="ih"
+                      >
+                        B
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="am-indexed-list-section-body am-list-body"
+          >
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  北京市
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  北京市0
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  北京市1
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  北京市2
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  北京市3
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  北京市4
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  北京市5
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  北京市6
+                </div>
+              </div>
+            </div>
+            <div
+              class="am-list-item am-list-item-middle"
+            >
+              <div
+                class="am-list-line"
+              >
+                <div
+                  class="am-list-content"
+                >
+                  北京市7
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-list-footer"
+      >
+        <span>
+          尾部内容请自定义
+        </span>
+      </div>
+    </div>
+    <ul
+      class="am-indexed-list-quick-search-bar"
+      style="top:85px;"
+    >
+      <li
+        data-qf-target="#"
+      >
+        #
+      </li>
+      <li
+        data-qf-target="A"
+      >
+        A
+      </li>
+      <li
+        data-qf-target="B"
+      >
+        B
+      </li>
+      <li
+        data-qf-target="C"
+      >
+        C
+      </li>
+      <li
+        data-qf-target="F"
+      >
+        F
+      </li>
+      <li
+        data-qf-target="G"
+      >
+        G
+      </li>
+      <li
+        data-qf-target="H"
+      >
+        H
+      </li>
+      <li
+        data-qf-target="J"
+      >
+        J
+      </li>
+      <li
+        data-qf-target="L"
+      >
+        L
+      </li>
+      <li
+        data-qf-target="N"
+      >
+        N
+      </li>
+      <li
+        data-qf-target="Q"
+      >
+        Q
+      </li>
+      <li
+        data-qf-target="S"
+      >
+        S
+      </li>
+      <li
+        data-qf-target="T"
+      >
+        T
+      </li>
+      <li
+        data-qf-target="X"
+      >
+        X
+      </li>
+      <li
+        data-qf-target="Y"
+      >
+        Y
+      </li>
+      <li
+        data-qf-target="Z"
+      >
+        Z
+      </li>
+    </ul>
+  </div>
+</div>
+`;
diff --git a/components/list-view/__tests__/demo.test.js b/components/list-view/__tests__/demo.test.js
new file mode 100644
index 00000000000..3d6b8b6c4a6
--- /dev/null
+++ b/components/list-view/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('list-view');
diff --git a/components/list-view/__tests__/demo.test.web.js b/components/list-view/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..c29ddea3b7f
--- /dev/null
+++ b/components/list-view/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('list-view');
diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..a029a5f8642
--- /dev/null
+++ b/components/list/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,1779 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
+<ScrollView
+  automaticallyAdjustContentInsets={false}
+  showsHorizontalScrollIndicator={false}
+  showsVerticalScrollIndicator={false}
+  style={
+    Object {
+      "backgroundColor": "#f5f5f9",
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={undefined}
+  >
+    <View>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "backgroundColor": "#f5f5f9",
+            "color": "#888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+            "paddingTop": 15,
+          }
+        }
+      >
+        左侧无icon
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#ddd",
+          "borderTopWidth": 0.5,
+        }
+      }
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          data-seed="logId"
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                标题文字点击无反馈，文字超长则隐藏，文字超长则隐藏
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                标题文字
+              </Text>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#888",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                箭头向右
+              </Text>
+            </View>
+            <Image
+              source={1}
+              style={
+                Object {
+                  "height": 13,
+                  "marginLeft": 8,
+                  "marginTop": 3,
+                  "width": 8,
+                }
+              }
+            />
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                标题文字
+              </Text>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#888",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                箭头向下
+              </Text>
+            </View>
+            <Image
+              source={1}
+              style={
+                Object {
+                  "height": 8,
+                  "marginLeft": 8,
+                  "width": 13,
+                }
+              }
+            />
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                标题文字
+              </Text>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#888",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                箭头向上
+              </Text>
+            </View>
+            <Image
+              source={1}
+              style={
+                Object {
+                  "height": 8,
+                  "marginLeft": 8,
+                  "width": 13,
+                }
+              }
+            />
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                标题文字
+              </Text>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#888",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                没有箭头
+              </Text>
+            </View>
+            <View
+              style={
+                Object {
+                  "height": 13,
+                  "marginLeft": 8,
+                  "marginTop": 3,
+                  "width": 8,
+                }
+              }
+            />
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                Object {
+                  "paddingBottom": 6,
+                  "paddingTop": 6,
+                },
+                Object {},
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                垂直居中对齐
+              </Text>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#888",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                内容内容
+              </Text>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "minHeight": 10,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#888",
+                        "fontSize": 15,
+                        "paddingTop": 3,
+                        "textAlignVertical": "center",
+                      },
+                      Object {
+                        "textAlign": "right",
+                      },
+                    ]
+                  }
+                >
+                  辅助文字内容
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                Object {
+                  "paddingBottom": 6,
+                  "paddingTop": 6,
+                },
+                Object {},
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                垂直居中对齐
+              </Text>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "minHeight": 10,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#888",
+                        "fontSize": 15,
+                        "paddingTop": 3,
+                        "textAlignVertical": "center",
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  辅助文字内容
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#888",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                内容内容
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                Object {
+                  "paddingBottom": 6,
+                  "paddingTop": 6,
+                },
+                Object {
+                  "alignItems": "flex-start",
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                顶部对齐
+              </Text>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "minHeight": 10,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#888",
+                        "fontSize": 15,
+                        "paddingTop": 3,
+                        "textAlignVertical": "center",
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  辅助文字内容辅助文字内容辅助文字内容辅助文字内容
+                </Text>
+              </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "minHeight": 10,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#888",
+                        "fontSize": 15,
+                        "paddingTop": 3,
+                        "textAlignVertical": "center",
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  辅助文字内容
+                </Text>
+              </View>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Array [
+                    Object {
+                      "color": "#888",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
+              </Text>
+            </View>
+            <Image
+              source={1}
+              style={
+                Object {
+                  "height": 13,
+                  "marginLeft": 8,
+                  "marginTop": 3,
+                  "width": 8,
+                }
+              }
+            />
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                Object {
+                  "paddingBottom": 6,
+                  "paddingTop": 6,
+                },
+                Object {
+                  "alignItems": "flex-end",
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                底部对齐
+              </Text>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#888",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                内容内容
+              </Text>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "minHeight": 10,
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#888",
+                        "fontSize": 15,
+                        "paddingTop": 3,
+                        "textAlignVertical": "center",
+                      },
+                      Object {
+                        "textAlign": "right",
+                      },
+                    ]
+                  }
+                >
+                  辅助文字内容
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#fff",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "bottom": 0,
+              "height": 1,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={undefined}
+  >
+    <View>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "backgroundColor": "#f5f5f9",
+            "color": "#888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+            "paddingTop": 15,
+          }
+        }
+      >
+        带缩略图
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#ddd",
+          "borderTopWidth": 0.5,
+        }
+      }
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 22,
+                  "marginRight": 15,
+                  "width": 22,
+                },
+                false,
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                thumb
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Image
+            source={
+              Object {
+                "uri": "https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png",
+              }
+            }
+            style={
+              Array [
+                Object {
+                  "height": 22,
+                  "marginRight": 15,
+                  "width": 22,
+                },
+                false,
+              ]
+            }
+          />
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                thumb
+              </Text>
+            </View>
+            <Image
+              source={1}
+              style={
+                Object {
+                  "height": 13,
+                  "marginLeft": 8,
+                  "marginTop": 3,
+                  "width": 8,
+                }
+              }
+            />
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                extra为Image
+              </Text>
+            </View>
+            <Image
+              source={
+                Object {
+                  "uri": "https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 29,
+                  "width": 29,
+                }
+              }
+            />
+            <Image
+              source={1}
+              style={
+                Object {
+                  "height": 13,
+                  "marginLeft": 8,
+                  "marginTop": 3,
+                  "width": 8,
+                }
+              }
+            />
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#fff",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "bottom": 0,
+              "height": 1,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+</ScrollView>
+`;
diff --git a/components/list/__tests__/__snapshots__/demo.test.web.js.snap b/components/list/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..0b96d590bbc
--- /dev/null
+++ b/components/list/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,644 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/list/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-list my-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      基本样式
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            标题文字
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            内容内容
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-list my-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      带副标题
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line am-list-line-multiple"
+        >
+          <div
+            class="am-list-content"
+          >
+            标题文字 
+            <div
+              class="am-list-brief"
+            >
+              副标题
+            </div>
+          </div>
+          <div
+            class="am-list-arrow am-list-arrow-horizontal"
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-thumb"
+        >
+          <img
+            src="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
+          />
+        </div>
+        <div
+          class="am-list-line am-list-line-multiple"
+        >
+          <div
+            class="am-list-content"
+          >
+            标题文字 
+            <div
+              class="am-list-brief"
+            >
+              副标题
+            </div>
+          </div>
+          <div
+            class="am-list-arrow am-list-arrow-horizontal"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-list my-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      右侧自定义（无内容 / 文字 / 图片）
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            标题文字
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            标题文字
+          </div>
+          <div
+            class="am-list-arrow am-list-arrow-horizontal"
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            标题文字
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            内容内容
+          </div>
+          <div
+            class="am-list-arrow am-list-arrow-horizontal"
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-top"
+      >
+        <div
+          class="am-list-thumb"
+        >
+          <img
+            src="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
+          />
+        </div>
+        <div
+          class="am-list-line am-list-line-multiple"
+        >
+          <div
+            class="am-list-content"
+          >
+            标题文字 
+            <div
+              class="am-list-brief"
+            >
+              副标题
+            </div>
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            10:30
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-list my-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      垂直居中对齐
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line am-list-line-multiple"
+        >
+          <div
+            class="am-list-content"
+          >
+            标题文字 
+            <div
+              class="am-list-brief"
+            >
+              副标题
+            </div>
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            内容内容
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      左侧带图标
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-thumb"
+        >
+          <img
+            src="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
+          />
+        </div>
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            我的钱包
+          </div>
+          <div
+            class="am-list-arrow am-list-arrow-horizontal"
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-thumb"
+        >
+          <img
+            src="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
+          />
+        </div>
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            我的花销占比
+          </div>
+          <div
+            class="am-list-arrow am-list-arrow-horizontal"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-list my-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      文字换行
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-list-item-middle"
+        data-seed="logId"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            单行模式，文字超长则隐藏；文本内容文本内容文本内容文本内容
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line am-list-line-wrap"
+        >
+          <div
+            class="am-list-content"
+          >
+            多行模式，文字超长则换行；文本内容文本内容文本内容文本内容文本内容文本内容
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-top"
+      >
+        <div
+          class="am-list-line am-list-line-multiple am-list-line-wrap"
+        >
+          <div
+            class="am-list-content"
+          >
+            多行标题文字超长直接折行，文字可能比较长、文字可能比较长、
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            内容内容
+          </div>
+        </div>
+      </div>
+      <div
+        class="spe am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line am-list-line-wrap"
+        >
+          <div
+            class="am-list-content"
+          >
+            极个别情况下，单行标题文字可能比较长，文字可能比较长、文字可能比较长、靠近右边会折行
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            没有箭头
+          </div>
+          <div
+            class="am-list-arrow"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-list my-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      其他
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            点击禁用
+          </div>
+          <div
+            class="am-list-extra"
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            <select>
+              <option
+                selected=""
+                value="1"
+              >
+                这是原生 html select
+              </option>
+              <option
+                disabled=""
+                value="2"
+              >
+                不可选
+              </option>
+              <option
+                value="3"
+              >
+                选项3
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/list/demo/form.md correctly 1`] = `
+<form>
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      验证表单
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          帐号
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder="请输入账号"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-input-item"
+      >
+        <div
+          class="am-input-label am-input-label-5"
+        >
+          密码
+        </div>
+        <div
+          class="am-input-control"
+        >
+          <input
+            placeholder="请输入密码"
+            type="password"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            确认信息
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            <label
+              class="am-switch"
+            >
+              <input
+                checked=""
+                class="am-switch-checkbox"
+                name=""
+                type="checkbox"
+              />
+              <div
+                class="checkbox"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            <div
+              class="am-slider-wrapper"
+            >
+              <div
+                class="am-slider"
+              >
+                <div
+                  class="am-slider-rail"
+                />
+                <div
+                  class="am-slider-track am-slider-track-1"
+                  style="visibility:visible;left:20%;width:30%;"
+                />
+                <div
+                  class="am-slider-step"
+                />
+                <div
+                  class="am-slider-handle am-slider-handle-1"
+                  style="left:20%;"
+                />
+                <div
+                  class="am-slider-handle am-slider-handle-2"
+                  style="left:50%;"
+                />
+                <div
+                  class="am-slider-mark"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            预定人数
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            <div
+              class="am-stepper showNumber"
+              style="width:100%;min-width:2rem;"
+            >
+              <div
+                class="am-stepper-handler-wrap"
+              >
+                <span
+                  class="am-stepper-handler am-stepper-handler-up "
+                  unselectable="unselectable"
+                >
+                  <svg
+                    class="am-icon am-icon-[object Object] am-icon-xxs"
+                  >
+                    <use
+                      xlink:href="#[object Object]"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="am-stepper-handler am-stepper-handler-down "
+                  unselectable="unselectable"
+                >
+                  <svg
+                    class="am-icon am-icon-[object Object] am-icon-xxs"
+                  >
+                    <use
+                      xlink:href="#[object Object]"
+                    />
+                  </svg>
+                </span>
+              </div>
+              <div
+                class="am-stepper-input-wrap"
+              >
+                <input
+                  autocomplete="off"
+                  class="am-stepper-input"
+                  max="Infinity"
+                  min="-Infinity"
+                  value="20"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            <a
+              class="am-button am-button-primary am-button-inline"
+              role="button"
+            >
+              <span>
+                提交验证
+              </span>
+            </a>
+            <a
+              class="am-button am-button-inline"
+              role="button"
+              style="margin-left:5px;"
+            >
+              <span>
+                重 置
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-list-footer"
+    />
+  </div>
+</form>
+`;
diff --git a/components/list/__tests__/demo.test.js b/components/list/__tests__/demo.test.js
new file mode 100644
index 00000000000..2cd25488c68
--- /dev/null
+++ b/components/list/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('list');
diff --git a/components/list/__tests__/demo.test.web.js b/components/list/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..7c4e0a0afe9
--- /dev/null
+++ b/components/list/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('list');
diff --git a/components/list/index.web.tsx b/components/list/index.web.tsx
index 092e6f3d507..f4cd896997a 100644
--- a/components/list/index.web.tsx
+++ b/components/list/index.web.tsx
@@ -1,6 +1,6 @@
 /* tslint:disable:jsx-no-multiline-js */
 import React from 'react';
-import Item from './ListItem';
+import Item from './ListItem.web';
 import classNames from 'classnames';
 import { ListProps } from './PropsType';
 
diff --git a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..adab69af583
--- /dev/null
+++ b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,543 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/locale-provider/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "marginTop": 30,
+    }
+  }
+>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "height": 42,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+          },
+          Object {
+            "backgroundColor": "#108ee9",
+            "borderColor": "#108ee9",
+          },
+          false,
+          false,
+          false,
+          undefined,
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "fontSize": 18,
+          },
+          Object {
+            "color": "#fff",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      change to chinese
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexWrap": "nowrap",
+              "justifyContent": "flex-start",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              undefined,
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                },
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "borderRadius": 5,
+                    "borderWidth": 1,
+                    "justifyContent": "center",
+                  },
+                  Object {
+                    "height": 42,
+                    "paddingLeft": 15,
+                    "paddingRight": 15,
+                  },
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#ddd",
+                  },
+                  false,
+                  false,
+                  false,
+                  undefined,
+                ],
+              ]
+            }
+            testID={undefined}
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "fontSize": 18,
+                  },
+                  Object {
+                    "color": "#000",
+                  },
+                  false,
+                  false,
+                ]
+              }
+            >
+              Prev
+            </Text>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              undefined,
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#108ee9",
+                    "fontSize": 18,
+                  },
+                ]
+              }
+            >
+              2
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 18,
+                  },
+                ]
+              }
+            >
+              /
+              5
+            </Text>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              undefined,
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                },
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "borderRadius": 5,
+                    "borderWidth": 1,
+                    "justifyContent": "center",
+                  },
+                  Object {
+                    "height": 42,
+                    "paddingLeft": 15,
+                    "paddingRight": 15,
+                  },
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#ddd",
+                  },
+                  false,
+                  false,
+                  false,
+                  undefined,
+                ],
+              ]
+            }
+            testID={undefined}
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "fontSize": 18,
+                  },
+                  Object {
+                    "color": "#000",
+                  },
+                  false,
+                  false,
+                ]
+              }
+            >
+              Next
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Object {
+          "backgroundColor": "white",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "backgroundColor": "#fff",
+            "borderTopColor": "#ddd",
+            "borderTopWidth": 0.5,
+          }
+        }
+      >
+        <View
+          style={undefined}
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                },
+                undefined,
+              ]
+            }
+            testID={undefined}
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "#fff",
+                    "flexDirection": "row",
+                    "flexGrow": 1,
+                    "paddingLeft": 15,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "borderBottomColor": "#ddd",
+                      "borderBottomWidth": 0.5,
+                      "flex": 1,
+                      "flexDirection": "row",
+                      "minHeight": 45,
+                      "paddingBottom": 6,
+                      "paddingRight": 15,
+                      "paddingTop": 6,
+                    },
+                    false,
+                    false,
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    accessible={true}
+                    allowFontScaling={true}
+                    ellipsizeMode="tail"
+                    numberOfLines={1}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#000",
+                          "fontSize": 17,
+                          "lineHeight": 19,
+                          "textAlignVertical": "center",
+                        },
+                      ]
+                    }
+                  >
+                    日期
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    accessible={true}
+                    allowFontScaling={true}
+                    ellipsizeMode="tail"
+                    numberOfLines={1}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#888",
+                          "fontSize": 17,
+                          "lineHeight": 19,
+                          "textAlign": "right",
+                          "textAlignVertical": "center",
+                        },
+                      ]
+                    }
+                  >
+                    点击查看国际化
+                  </Text>
+                </View>
+                <Image
+                  source={1}
+                  style={
+                    Object {
+                      "height": 13,
+                      "marginLeft": 8,
+                      "marginTop": 3,
+                      "width": 8,
+                    }
+                  }
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "borderBottomColor": "#ddd",
+                "borderBottomWidth": 0.5,
+                "bottom": 0,
+                "height": 1,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/locale-provider/__tests__/__snapshots__/demo.test.web.js.snap b/components/locale-provider/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..f301284eeaf
--- /dev/null
+++ b/components/locale-provider/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
+<div>
+  <a
+    class="am-button am-button-primary"
+    role="button"
+  >
+    <span>
+      change to chinese
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div>
+    <div
+      class="am-pagination"
+    >
+      <div
+        class="am-flexbox am-flexbox-align-middle"
+      >
+        <div
+          class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-prev"
+        >
+          <a
+            class="am-button am-button-inline"
+            role="button"
+          >
+            <span>
+              Prev
+            </span>
+          </a>
+        </div>
+        <div
+          class="am-flexbox-item am-pagination-wrap"
+        >
+          <span
+            class="active"
+          >
+            2
+          </span>
+          /
+          <span>
+            5
+          </span>
+        </div>
+        <div
+          class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-next"
+        >
+          <a
+            class="am-button am-button-inline"
+            role="button"
+          >
+            <span>
+              Next
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-whitespace am-whitespace-md"
+    />
+    <div
+      class="am-list date-picker-list"
+      style="background-color:white;"
+    >
+      <div
+        class="am-list-body"
+      >
+        <div>
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                日期
+              </div>
+              <div
+                class="am-list-extra"
+              >
+                点击查看国际化
+              </div>
+              <div
+                class="am-list-arrow am-list-arrow-horizontal"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/locale-provider/__tests__/demo.test.js b/components/locale-provider/__tests__/demo.test.js
new file mode 100644
index 00000000000..6c561d89501
--- /dev/null
+++ b/components/locale-provider/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('locale-provider');
diff --git a/components/locale-provider/__tests__/demo.test.web.js b/components/locale-provider/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..890d3b1fe7a
--- /dev/null
+++ b/components/locale-provider/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('locale-provider');
diff --git a/components/menu/__tests__/__snapshots__/demo.test.js.snap b/components/menu/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..a4975e927f3
--- /dev/null
+++ b/components/menu/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/menu/demo/basic.tsx correctly 1`] = `
+<div>
+  TODO for react-native
+</div>
+`;
diff --git a/components/menu/__tests__/__snapshots__/demo.test.web.js.snap b/components/menu/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..c14a7023804
--- /dev/null
+++ b/components/menu/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/menu/demo/basic.md correctly 1`] = `
+<div
+  class=""
+>
+  <div>
+    <div
+      class="top-nav-bar am-navbar am-navbar-light"
+    >
+      <div
+        class="am-navbar-left"
+      >
+        <span
+          class="am-navbar-left-icon"
+        >
+          <svg
+            class="am-icon am-icon-[object Object] am-icon-md"
+          >
+            <use
+              xlink:href="#[object Object]"
+            />
+          </svg>
+        </span>
+        <span
+          class="am-navbar-left-content"
+        >
+          菜单
+        </span>
+      </div>
+      <div
+        class="am-navbar-title"
+      >
+        标题
+      </div>
+      <div
+        class="am-navbar-right"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/menu/__tests__/demo.test.js b/components/menu/__tests__/demo.test.js
new file mode 100644
index 00000000000..8ab072d8cab
--- /dev/null
+++ b/components/menu/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('menu');
diff --git a/components/menu/__tests__/demo.test.web.js b/components/menu/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..43321a5800f
--- /dev/null
+++ b/components/menu/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('menu');
diff --git a/components/modal/__tests__/__snapshots__/demo.test.js.snap b/components/modal/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..9156a52731d
--- /dev/null
+++ b/components/modal/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,427 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/modal/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "marginTop": 64,
+      "paddingTop": 30,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#ddd",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#000",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        显示对话框
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#ddd",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#000",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        显示全屏对话框
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#ddd",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#000",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        显示 Modal.alert
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 42,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#fff",
+              "borderColor": "#ddd",
+            },
+            false,
+            false,
+            false,
+            undefined,
+          ],
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+            },
+            Object {
+              "color": "#000",
+            },
+            false,
+            false,
+          ]
+        }
+      >
+        显示 Modal.opertation
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "zIndex": 999,
+      }
+    }
+  >
+    <Modal
+      animationType="slide"
+      onRequestClose={[Function]}
+      visible={false}
+    >
+      <View
+        style={Object {}}
+      >
+        <View
+          style={
+            Object {
+              "paddingVertical": 220,
+            }
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "textAlign": "center",
+              }
+            }
+          >
+            这是内容...
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "textAlign": "center",
+              }
+            }
+          >
+            这是内容...
+          </Text>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 42,
+                  "paddingLeft": 15,
+                  "paddingRight": 15,
+                },
+                Object {
+                  "backgroundColor": "#108ee9",
+                  "borderColor": "#108ee9",
+                },
+                false,
+                false,
+                false,
+                undefined,
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "fontSize": 18,
+                },
+                Object {
+                  "color": "#fff",
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            close modal
+          </Text>
+        </View>
+      </View>
+    </Modal>
+  </View>
+  <View
+    style={
+      Object {
+        "zIndex": 999,
+      }
+    }
+  />
+</View>
+`;
diff --git a/components/modal/__tests__/__snapshots__/demo.test.web.js.snap b/components/modal/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..95119d5c1ea
--- /dev/null
+++ b/components/modal/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,164 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/modal/demo/alert.md correctly 1`] = `
+<div
+  class="am-wingblank am-wingblank-lg"
+>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      自定义按钮 
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      确认对话框
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      弹出多个按钮 
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      按钮 Promise
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+</div>
+`;
+
+exports[`renders ./components/modal/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <a
+      class="am-button"
+      role="button"
+    >
+      <span>
+        Modal 对话框
+      </span>
+    </a>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+</div>
+`;
+
+exports[`renders ./components/modal/demo/operation.md correctly 1`] = `
+<div
+  class="am-wingblank am-wingblank-lg"
+>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      操作按钮
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+</div>
+`;
+
+exports[`renders ./components/modal/demo/propmt.md correctly 1`] = `
+<div
+  class="am-wingblank am-wingblank-lg"
+>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      按钮 Promise
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      输入框默认值 
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      输入框密码形式 
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      自定义按钮形式 
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      输入框登录形式 
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+</div>
+`;
diff --git a/components/modal/__tests__/demo.test.js b/components/modal/__tests__/demo.test.js
new file mode 100644
index 00000000000..135064e7908
--- /dev/null
+++ b/components/modal/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('modal');
diff --git a/components/modal/__tests__/demo.test.web.js b/components/modal/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..ee5631d0f64
--- /dev/null
+++ b/components/modal/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('modal');
diff --git a/components/nav-bar/__tests__/__snapshots__/demo.test.web.js.snap b/components/nav-bar/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..47d678f105b
--- /dev/null
+++ b/components/nav-bar/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/nav-bar/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-navbar am-navbar-light"
+  >
+    <div
+      class="am-navbar-left"
+    >
+      <span
+        class="am-navbar-left-icon"
+      >
+        <svg
+          class="am-icon am-icon-left am-icon-md"
+        >
+          <use
+            xlink:href="#left"
+          />
+        </svg>
+      </span>
+      <span
+        class="am-navbar-left-content"
+      >
+        返回
+      </span>
+    </div>
+    <div
+      class="am-navbar-title"
+    >
+      NavBar
+    </div>
+    <div
+      class="am-navbar-right"
+    >
+      <svg
+        class="am-icon am-icon-search am-icon-md"
+        style="margin-right:0.32rem;"
+      >
+        <use
+          xlink:href="#search"
+        />
+      </svg>
+      <svg
+        class="am-icon am-icon-ellipsis am-icon-md"
+      >
+        <use
+          xlink:href="#ellipsis"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/nav-bar/__tests__/demo.test.web.js b/components/nav-bar/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..8e7d000e184
--- /dev/null
+++ b/components/nav-bar/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('nav-bar');
diff --git a/components/notice-bar/__tests__/__snapshots__/demo.test.js.snap b/components/notice-bar/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..c4c857f9d29
--- /dev/null
+++ b/components/notice-bar/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,582 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "marginTop": 10,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#fffada",
+          "flexDirection": "row",
+          "height": 36,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+    testID={undefined}
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 15,
+          },
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "https://zos.alipayobjects.com/rmsportal/UgviADRsIpznkjSEXWEaPTlKtPCMSlth.png",
+          }
+        }
+        style={
+          Object {
+            "height": 12,
+            "width": 14,
+          }
+        }
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "#f4333c",
+            "flex": 1,
+            "fontSize": 15,
+            "marginRight": 15,
+          },
+          Object {
+            "marginLeft": 5,
+          },
+        ]
+      }
+    >
+      国庆期间余额宝收益和转出到账时间
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#fffada",
+          "flexDirection": "row",
+          "height": 36,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 15,
+          },
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "https://zos.alipayobjects.com/rmsportal/UgviADRsIpznkjSEXWEaPTlKtPCMSlth.png",
+          }
+        }
+        style={
+          Object {
+            "height": 12,
+            "width": 14,
+          }
+        }
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "#f4333c",
+            "flex": 1,
+            "fontSize": 15,
+            "marginRight": 15,
+          },
+          Object {
+            "marginLeft": 5,
+          },
+        ]
+      }
+    >
+      国庆期间余额宝收益和转出到账时间1
+    </Text>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={undefined}
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "#f4333c",
+              "fontSize": 18,
+              "fontWeight": "200",
+              "marginRight": 15,
+            },
+          ]
+        }
+      >
+        ×
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#fffada",
+          "flexDirection": "row",
+          "height": 36,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 15,
+          },
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "https://zos.alipayobjects.com/rmsportal/bRnouywfdRsCcLU.png",
+          }
+        }
+        style={
+          Object {
+            "height": 12,
+            "width": 12,
+          }
+        }
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "#f4333c",
+            "flex": 1,
+            "fontSize": 15,
+            "marginRight": 15,
+          },
+          Object {
+            "marginLeft": 5,
+          },
+        ]
+      }
+    >
+      自定义 NoticeBar 前面的图标
+    </Text>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={undefined}
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "#f4333c",
+              "fontSize": 18,
+              "fontWeight": "200",
+              "marginRight": 15,
+            },
+          ]
+        }
+      >
+        ×
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#fffada",
+          "flexDirection": "row",
+          "height": 36,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+    testID={undefined}
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 15,
+          },
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "https://zos.alipayobjects.com/rmsportal/UgviADRsIpznkjSEXWEaPTlKtPCMSlth.png",
+          }
+        }
+        style={
+          Object {
+            "height": 12,
+            "width": 14,
+          }
+        }
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "#f4333c",
+            "flex": 1,
+            "fontSize": 15,
+            "marginRight": 15,
+          },
+          Object {
+            "marginLeft": 5,
+          },
+        ]
+      }
+    >
+      国庆期间余额宝收益和转出到账时间
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "#f4333c",
+            "fontSize": 10,
+            "fontWeight": "500",
+            "marginRight": 15,
+            "transform": Array [
+              Object {
+                "rotate": "225deg",
+              },
+            ],
+          },
+        ]
+      }
+    >
+      ∟
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#fffada",
+          "flexDirection": "row",
+          "height": 36,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+    testID={undefined}
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 15,
+          },
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "https://zos.alipayobjects.com/rmsportal/UgviADRsIpznkjSEXWEaPTlKtPCMSlth.png",
+          }
+        }
+        style={
+          Object {
+            "height": 12,
+            "width": 14,
+          }
+        }
+      />
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "#f4333c",
+            "flex": 1,
+            "fontSize": 15,
+            "marginRight": 15,
+          },
+          Object {
+            "marginLeft": 5,
+          },
+        ]
+      }
+    >
+      国庆期间余额宝收益和转出到账时间
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "#f4333c",
+            "fontSize": 10,
+            "fontWeight": "500",
+            "marginRight": 15,
+            "transform": Array [
+              Object {
+                "rotate": "225deg",
+              },
+            ],
+          },
+        ]
+      }
+    >
+      ∟
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#fffada",
+          "flexDirection": "row",
+          "height": 36,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "#f4333c",
+            "flex": 1,
+            "fontSize": 15,
+            "marginRight": 15,
+          },
+          Object {
+            "marginLeft": 15,
+          },
+        ]
+      }
+    >
+      去除 NoticeBar 默认的喇叭图标
+    </Text>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={undefined}
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "#f4333c",
+              "fontSize": 18,
+              "fontWeight": "200",
+              "marginRight": 15,
+            },
+          ]
+        }
+      >
+        ×
+      </Text>
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/notice-bar/__tests__/__snapshots__/demo.test.web.js.snap b/components/notice-bar/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..86a2ff83838
--- /dev/null
+++ b/components/notice-bar/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,166 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/notice-bar/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-notice-bar"
+  >
+    <div
+      class="am-notice-bar-icon"
+    >
+       
+      <svg
+        class="am-icon am-icon-[object Object] am-icon-xxs"
+      >
+        <use
+          xlink:href="#[object Object]"
+        />
+      </svg>
+       
+    </div>
+    <div
+      class="am-notice-bar-content"
+    >
+      <div
+        class="am-notice-bar-marquee-wrap "
+        style="overflow:hidden;"
+      >
+        <div
+          class="am-notice-bar-marquee"
+          style="position:relative;right:0;white-space:nowrap;display:inline-block;padding:0 0.15rem;"
+        >
+          国庆期间余额宝收益和转出到账时间通知：由于国庆到来，余额宝收益到账将延迟，特此通知 
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-notice-bar"
+  >
+    <div
+      class="am-notice-bar-icon"
+    >
+       
+      <svg
+        class="am-icon am-icon-[object Object] am-icon-xxs"
+      >
+        <use
+          xlink:href="#[object Object]"
+        />
+      </svg>
+       
+    </div>
+    <div
+      class="am-notice-bar-content"
+    >
+      <div
+        class="am-notice-bar-marquee-wrap "
+        style="overflow:hidden;"
+      >
+        <div
+          class="am-notice-bar-marquee"
+          style="position:relative;right:0;white-space:nowrap;display:inline-block;"
+        >
+          国庆期间余额宝收益和转出到账时间 
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-notice-bar-operation"
+    >
+      <svg
+        class="am-icon am-icon-right am-icon-md"
+      >
+        <use
+          xlink:href="#right"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-notice-bar"
+  >
+    <div
+      class="am-notice-bar-content"
+    >
+      <div
+        class="am-notice-bar-marquee-wrap "
+        style="overflow:hidden;"
+      >
+        <div
+          class="am-notice-bar-marquee"
+          style="position:relative;right:0;white-space:nowrap;display:inline-block;"
+        >
+          去除 NoticeBar 默认的喇叭图标 
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-notice-bar-operation"
+    >
+      <svg
+        class="am-icon am-icon-cross am-icon-md"
+      >
+        <use
+          xlink:href="#cross"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-notice-bar"
+  >
+    <div
+      class="am-notice-bar-icon"
+    >
+       
+      <svg
+        class="am-icon am-icon-check-circle-o am-icon-xxs"
+      >
+        <use
+          xlink:href="#check-circle-o"
+        />
+      </svg>
+       
+    </div>
+    <div
+      class="am-notice-bar-content"
+    >
+      <div
+        class="am-notice-bar-marquee-wrap "
+        style="overflow:hidden;"
+      >
+        <div
+          class="am-notice-bar-marquee"
+          style="position:relative;right:0;white-space:nowrap;display:inline-block;"
+        >
+          自定义 NoticeBar 前面的小图标 
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-notice-bar-operation"
+    >
+      <svg
+        class="am-icon am-icon-cross am-icon-md"
+      >
+        <use
+          xlink:href="#cross"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/notice-bar/__tests__/demo.test.js b/components/notice-bar/__tests__/demo.test.js
new file mode 100644
index 00000000000..f15cbe5961f
--- /dev/null
+++ b/components/notice-bar/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('notice-bar');
diff --git a/components/notice-bar/__tests__/demo.test.web.js b/components/notice-bar/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..171fe83a115
--- /dev/null
+++ b/components/notice-bar/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('notice-bar');
diff --git a/components/pagination/__tests__/__snapshots__/demo.test.js.snap b/components/pagination/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..08631437555
--- /dev/null
+++ b/components/pagination/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,735 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/pagination/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginLeft": 15,
+        "marginRight": 15,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "justifyContent": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 42,
+                  "paddingLeft": 15,
+                  "paddingRight": 15,
+                },
+                Object {
+                  "backgroundColor": "#fff",
+                  "borderColor": "#ddd",
+                },
+                false,
+                false,
+                false,
+                undefined,
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "fontSize": 18,
+                },
+                Object {
+                  "color": "#000",
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            上一页
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#108ee9",
+                  "fontSize": 18,
+                },
+              ]
+            }
+          >
+            2
+          </Text>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#000",
+                  "fontSize": 18,
+                },
+              ]
+            }
+          >
+            /
+            5
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 42,
+                  "paddingLeft": 15,
+                  "paddingRight": 15,
+                },
+                Object {
+                  "backgroundColor": "#fff",
+                  "borderColor": "#ddd",
+                },
+                false,
+                false,
+                false,
+                undefined,
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "fontSize": 18,
+                },
+                Object {
+                  "color": "#000",
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            下一页
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "justifyContent": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "justifyContent": "flex-start",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 42,
+                  "paddingLeft": 15,
+                  "paddingRight": 15,
+                },
+                Object {
+                  "backgroundColor": "#fff",
+                  "borderColor": "#ddd",
+                },
+                false,
+                false,
+                false,
+                undefined,
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "fontSize": 18,
+                },
+                Object {
+                  "color": "#000",
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            上一页
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      />
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "flex": 1,
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 42,
+                  "paddingLeft": 15,
+                  "paddingRight": 15,
+                },
+                Object {
+                  "backgroundColor": "#fff",
+                  "borderColor": "#ddd",
+                },
+                false,
+                false,
+                false,
+                undefined,
+              ],
+            ]
+          }
+          testID={undefined}
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "fontSize": 18,
+                },
+                Object {
+                  "color": "#000",
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            下一页
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "justifyContent": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "#108ee9",
+              "fontSize": 18,
+            },
+          ]
+        }
+      >
+        4
+      </Text>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "#000",
+              "fontSize": 18,
+            },
+          ]
+        }
+      >
+        /
+        5
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "justifyContent": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          null,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ccc",
+              "borderRadius": 8,
+              "height": 8,
+              "width": 8,
+            },
+            Object {
+              "marginHorizontal": 2.5,
+              "marginVertical": 3,
+            },
+            false,
+          ]
+        }
+      />
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ccc",
+              "borderRadius": 8,
+              "height": 8,
+              "width": 8,
+            },
+            Object {
+              "marginHorizontal": 2.5,
+              "marginVertical": 3,
+            },
+            false,
+          ]
+        }
+      />
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ccc",
+              "borderRadius": 8,
+              "height": 8,
+              "width": 8,
+            },
+            Object {
+              "marginHorizontal": 2.5,
+              "marginVertical": 3,
+            },
+            Object {
+              "backgroundColor": "#888",
+            },
+          ]
+        }
+      />
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ccc",
+              "borderRadius": 8,
+              "height": 8,
+              "width": 8,
+            },
+            Object {
+              "marginHorizontal": 2.5,
+              "marginVertical": 3,
+            },
+            false,
+          ]
+        }
+      />
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ccc",
+              "borderRadius": 8,
+              "height": 8,
+              "width": 8,
+            },
+            Object {
+              "marginHorizontal": 2.5,
+              "marginVertical": 3,
+            },
+            false,
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/pagination/__tests__/__snapshots__/demo.test.web.js.snap b/components/pagination/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..6ebd65a7e03
--- /dev/null
+++ b/components/pagination/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,182 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
+<div
+  class="pagination-container"
+>
+  <p
+    class="sub-title"
+  >
+    按钮内带文本
+  </p>
+  <div
+    class="am-pagination"
+  >
+    <div
+      class="am-flexbox am-flexbox-align-middle"
+    >
+      <div
+        class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-prev"
+      >
+        <a
+          class="am-button am-button-inline"
+          role="button"
+        />
+      </div>
+      <div
+        class="am-flexbox-item am-pagination-wrap"
+      >
+        <span
+          class="active"
+        >
+          2
+        </span>
+        /
+        <span>
+          5
+        </span>
+      </div>
+      <div
+        class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-next"
+      >
+        <a
+          class="am-button am-button-inline"
+          role="button"
+        />
+      </div>
+    </div>
+  </div>
+  <p
+    class="sub-title"
+  >
+    带文本和icon
+  </p>
+  <div
+    class="am-pagination"
+  >
+    <div
+      class="am-flexbox am-flexbox-align-middle"
+    >
+      <div
+        class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-prev"
+      >
+        <a
+          class="am-button am-button-inline"
+          role="button"
+        />
+      </div>
+      <div
+        class="am-flexbox-item am-pagination-wrap"
+      >
+        <span
+          class="active"
+        >
+          2
+        </span>
+        /
+        <span>
+          5
+        </span>
+      </div>
+      <div
+        class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-next"
+      >
+        <a
+          class="am-button am-button-inline"
+          role="button"
+        />
+      </div>
+    </div>
+  </div>
+  <p
+    class="sub-title"
+  >
+    隐藏数字
+  </p>
+  <div
+    class="am-pagination"
+  >
+    <div
+      class="am-flexbox am-flexbox-align-middle"
+    >
+      <div
+        class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-prev"
+      >
+        <a
+          class="am-button am-button-inline"
+          role="button"
+        />
+      </div>
+      <div
+        class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-next"
+      >
+        <a
+          class="am-button am-button-inline"
+          role="button"
+        />
+      </div>
+    </div>
+  </div>
+  <p
+    class="sub-title"
+  >
+    只显示数字
+  </p>
+  <div
+    class="am-pagination"
+  >
+    <div
+      class="am-pagination-wrap"
+    >
+      <span
+        class="active"
+      >
+        4
+      </span>
+      /
+      <span>
+        5
+      </span>
+    </div>
+  </div>
+  <p
+    class="sub-title"
+  >
+    点状
+  </p>
+  <div
+    class="am-pagination"
+    style="margin-bottom:0.32rem;"
+  >
+    <div
+      class="am-pagination-wrap"
+    >
+      <div
+        class="am-pagination-wrap-dot"
+      >
+        <span />
+      </div>
+      <div
+        class="am-pagination-wrap-dot"
+      >
+        <span />
+      </div>
+      <div
+        class="am-pagination-wrap-dot am-pagination-wrap-dot-active"
+      >
+        <span />
+      </div>
+      <div
+        class="am-pagination-wrap-dot"
+      >
+        <span />
+      </div>
+      <div
+        class="am-pagination-wrap-dot"
+      >
+        <span />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/pagination/__tests__/demo.test.js b/components/pagination/__tests__/demo.test.js
new file mode 100644
index 00000000000..73db7e111ce
--- /dev/null
+++ b/components/pagination/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('pagination');
diff --git a/components/pagination/__tests__/demo.test.web.js b/components/pagination/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..6b7263cd380
--- /dev/null
+++ b/components/pagination/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('pagination');
diff --git a/components/picker-view/__tests__/__snapshots__/demo.test.web.js.snap b/components/picker-view/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..927c12713ce
--- /dev/null
+++ b/components/picker-view/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/picker-view/demo/basic.md correctly 1`] = `
+<div
+  class="am-picker"
+>
+  <div
+    class="am-picker-item"
+  >
+    <div
+      class="am-picker-col"
+    >
+      <div
+        class="am-picker-col-mask"
+      />
+      <div
+        class="am-picker-col-indicator"
+      />
+      <div
+        class="am-picker-col-content"
+      >
+        <div
+          class="am-picker-col-item am-picker-col-item-selected"
+        >
+          2013
+        </div>
+        <div
+          class="am-picker-col-item"
+        >
+          2014
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-picker-item"
+  >
+    <div
+      class="am-picker-col"
+    >
+      <div
+        class="am-picker-col-mask"
+      />
+      <div
+        class="am-picker-col-indicator"
+      />
+      <div
+        class="am-picker-col-content"
+      >
+        <div
+          class="am-picker-col-item am-picker-col-item-selected"
+        >
+          春
+        </div>
+        <div
+          class="am-picker-col-item"
+        >
+          夏
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/picker-view/__tests__/demo.test.web.js b/components/picker-view/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..159a1f420d5
--- /dev/null
+++ b/components/picker-view/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('picker-view');
diff --git a/components/picker/__tests__/__snapshots__/demo.test.js.snap b/components/picker/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..3bbdd18fba8
--- /dev/null
+++ b/components/picker/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/picker/demo/popup.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "marginTop": 30,
+    }
+  }
+>
+  <View
+    style={undefined}
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#ddd",
+          "borderTopWidth": 0.5,
+        }
+      }
+    >
+      <View
+        style={undefined}
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+              },
+              undefined,
+            ]
+          }
+          testID={undefined}
+        >
+          <View
+            last={true}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "backgroundColor": "#fff",
+                  "flexDirection": "row",
+                  "flexGrow": 1,
+                  "paddingLeft": 15,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "borderBottomColor": "#ddd",
+                    "borderBottomWidth": 0.5,
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "minHeight": 45,
+                    "paddingBottom": 6,
+                    "paddingRight": 15,
+                    "paddingTop": 6,
+                  },
+                  false,
+                  false,
+                ]
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "flexDirection": "column",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000",
+                        "fontSize": 17,
+                        "lineHeight": 19,
+                        "textAlignVertical": "center",
+                      },
+                    ]
+                  }
+                >
+                  省市选择(异步加载)
+                </Text>
+              </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "flexDirection": "column",
+                    },
+                  ]
+                }
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  style={
+                    Array [
+                      Object {
+                        "color": "#888",
+                        "fontSize": 17,
+                        "lineHeight": 19,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
+                      },
+                    ]
+                  }
+                >
+                  请选择
+                </Text>
+              </View>
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 13,
+                    "marginLeft": 8,
+                    "marginTop": 3,
+                    "width": 8,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#fff",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "bottom": 0,
+              "height": 1,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/picker/__tests__/__snapshots__/demo.test.web.js.snap b/components/picker/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..2e389b1c71f
--- /dev/null
+++ b/components/picker/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/picker/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-list picker-list"
+    style="background-color:white;"
+  >
+    <div
+      class="am-list-body"
+    >
+      <div>
+        <div
+          class="am-list-item am-list-item-middle"
+        >
+          <div
+            class="am-list-line"
+          >
+            <div
+              class="am-list-content"
+            >
+              选择地区（多列，联动）
+            </div>
+            <div
+              class="am-list-extra"
+            >
+              安徽省,六安市,金安区
+            </div>
+            <div
+              class="am-list-arrow am-list-arrow-horizontal"
+            />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="am-list-item am-list-item-middle"
+        >
+          <div
+            class="am-list-line"
+          >
+            <div
+              class="am-list-content"
+            >
+              选择季节（多列，不联动）
+            </div>
+            <div
+              class="am-list-extra"
+            >
+              2013,春
+            </div>
+            <div
+              class="am-list-arrow am-list-arrow-horizontal"
+            />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="am-list-item am-list-item-middle"
+        >
+          <div
+            class="am-list-line"
+          >
+            <div
+              class="am-list-content"
+            >
+              选择地区（单列）
+            </div>
+            <div
+              class="am-list-extra"
+            >
+              请选择
+            </div>
+            <div
+              class="am-list-arrow am-list-arrow-horizontal"
+            />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="am-list-item am-list-item-middle"
+        >
+          <div
+            class="am-list-line"
+          >
+            <div
+              class="am-list-content"
+            >
+              选择地区（多列，异步加载）
+            </div>
+            <div
+              class="am-list-extra"
+            >
+              请选择
+            </div>
+            <div
+              class="am-list-arrow am-list-arrow-horizontal"
+            />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          style="background-color:#fff;padding:0 0.3rem;"
+        >
+          <div
+            style="display:flex;height:0.9rem;line-height:0.9rem;"
+          >
+            <div
+              style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
+            >
+              选择地区（自定义 children）
+            </div>
+            <div
+              style="text-align:right;color:#888;"
+            >
+              请选择(可选)
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/picker/__tests__/demo.test.js b/components/picker/__tests__/demo.test.js
new file mode 100644
index 00000000000..49ada29b4e4
--- /dev/null
+++ b/components/picker/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('picker');
diff --git a/components/picker/__tests__/demo.test.web.js b/components/picker/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..c36b8e8f956
--- /dev/null
+++ b/components/picker/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('picker');
diff --git a/components/popover/__tests__/__snapshots__/demo.test.js.snap b/components/popover/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..bd6a80f49ec
--- /dev/null
+++ b/components/popover/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = `
+<View>
+  <View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "marginLeft": 100,
+          "marginTop": 30,
+        }
+      }
+    >
+      选择了：
+      
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "height": 400,
+        "justifyContent": "flex-end",
+        "paddingHorizontal": 5,
+        "paddingVertical": 10,
+      }
+    }
+  >
+    <View
+      onLayout={[Function]}
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "margin": 50,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#eee",
+            }
+          }
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "flexDirection": "row",
+                "paddingHorizontal": 10,
+              }
+            }
+            testID={undefined}
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              菜单
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "bottom": -1334,
+              "left": 0,
+              "opacity": 0,
+              "position": "absolute",
+              "top": 1334,
+            },
+            null,
+          ]
+        }
+        testID={undefined}
+      />
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/popover/__tests__/__snapshots__/demo.test.web.js.snap b/components/popover/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..80ccba19284
--- /dev/null
+++ b/components/popover/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/popover/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-navbar am-navbar-light"
+  >
+    <div
+      class="am-navbar-left"
+    >
+      <span
+        class="am-navbar-left-content"
+      />
+    </div>
+    <div
+      class="am-navbar-title"
+    >
+      NavBar
+    </div>
+    <div
+      class="am-navbar-right"
+    >
+      <div
+        style="height:100%;padding:0 0.3rem;margin-right:-0.3rem;display:flex;align-items:center;"
+      >
+        <svg
+          class="am-icon am-icon-ellipsis am-icon-md"
+        >
+          <use
+            xlink:href="#ellipsis"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/popover/__tests__/demo.test.js b/components/popover/__tests__/demo.test.js
new file mode 100644
index 00000000000..152b07a5276
--- /dev/null
+++ b/components/popover/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('popover');
diff --git a/components/popover/__tests__/demo.test.web.js b/components/popover/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..bc90257c99b
--- /dev/null
+++ b/components/popover/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('popover');
diff --git a/components/popup/__tests__/__snapshots__/demo.test.js.snap b/components/popup/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..c43ca3d06fc
--- /dev/null
+++ b/components/popup/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/popup/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "marginTop": 30,
+      "paddingHorizontal": 30,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "height": 42,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+          },
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+          false,
+          false,
+          false,
+          undefined,
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "fontSize": 18,
+          },
+          Object {
+            "color": "#000",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      向下弹出效果
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "height": 42,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+          },
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+          false,
+          false,
+          false,
+          undefined,
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "fontSize": 18,
+          },
+          Object {
+            "color": "#000",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      向上弹出效果
+    </Text>
+  </View>
+</View>
+`;
diff --git a/components/popup/__tests__/__snapshots__/demo.test.web.js.snap b/components/popup/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..7e71d1c5ed9
--- /dev/null
+++ b/components/popup/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/popup/demo/basic.md correctly 1`] = `
+<div
+  style="padding:0.15rem;"
+>
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      显 示
+    </span>
+  </a>
+</div>
+`;
+
+exports[`renders ./components/popup/demo/basic-up.md correctly 1`] = `
+<div
+  style="padding:0.15rem;"
+>
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      显 示
+    </span>
+  </a>
+</div>
+`;
diff --git a/components/popup/__tests__/demo.test.js b/components/popup/__tests__/demo.test.js
new file mode 100644
index 00000000000..53dfa4b90dd
--- /dev/null
+++ b/components/popup/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('popup');
diff --git a/components/popup/__tests__/demo.test.web.js b/components/popup/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..d5457749450
--- /dev/null
+++ b/components/popup/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('popup');
diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..b6c420822dd
--- /dev/null
+++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,206 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/progress/demo/basic.tsx correctly 1`] = `
+<View>
+  <View
+    onLayout={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#ddd",
+          "flex": 1,
+        },
+        Object {
+          "position": "absolute",
+          "top": 0,
+        },
+        null,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderBottomWidth": 4,
+            "borderColor": "#108ee9",
+            "borderStyle": "solid",
+          },
+          undefined,
+          Object {
+            "height": 0,
+            "width": 675,
+          },
+        ]
+      }
+    />
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "marginTop": 80,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+          "height": 4,
+          "marginRight": 10,
+        }
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ddd",
+              "flex": 1,
+            },
+            null,
+            null,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomWidth": 4,
+                "borderColor": "#108ee9",
+                "borderStyle": "solid",
+              },
+              undefined,
+              Object {
+                "height": 0,
+                "width": 300,
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      40
+      %
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "height": 23,
+            "paddingLeft": 5,
+            "paddingRight": 5,
+          },
+          Object {
+            "backgroundColor": "transparent",
+            "borderColor": "#108ee9",
+          },
+          false,
+          false,
+          false,
+          Object {
+            "marginLeft": 10,
+            "width": 50,
+          },
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "fontSize": 12,
+          },
+          Object {
+            "color": "#108ee9",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      (+-)10
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    onLayout={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#ddd",
+          "flex": 1,
+        },
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderBottomWidth": 4,
+            "borderColor": "#108ee9",
+            "borderStyle": "solid",
+          },
+          undefined,
+          Object {
+            "height": 0,
+            "width": 37.5,
+          },
+        ]
+      }
+    />
+  </View>
+</View>
+`;
diff --git a/components/progress/__tests__/__snapshots__/demo.test.web.js.snap b/components/progress/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..5da5a25155a
--- /dev/null
+++ b/components/progress/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/progress/demo/basic.md correctly 1`] = `
+<div
+  class="progress-container"
+>
+  <div
+    class="am-progress-outer am-progress-fixed-outer"
+  >
+    <div
+      class="am-progress-bar"
+      style="width:30%;height:0;"
+    />
+  </div>
+  <div
+    style="height:36px;"
+  />
+  <div
+    class="am-progress-outer am-progress-hide-outer"
+  >
+    <div
+      class="am-progress-bar"
+      style="width:0;height:0;"
+    />
+  </div>
+  <div
+    class="show-info"
+  >
+    <div
+      class="progress"
+    >
+      <div
+        class="am-progress-outer"
+      >
+        <div
+          class="am-progress-bar"
+          style="width:50%;height:0;"
+        />
+      </div>
+    </div>
+    <div>
+      50%
+    </div>
+  </div>
+  <a
+    class="am-button am-button-inline"
+    role="button"
+    style="margin-top:20px;"
+  >
+    <span>
+      (+-)10
+    </span>
+  </a>
+</div>
+`;
diff --git a/components/progress/__tests__/demo.test.js b/components/progress/__tests__/demo.test.js
new file mode 100644
index 00000000000..4eee7308652
--- /dev/null
+++ b/components/progress/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('progress');
diff --git a/components/progress/__tests__/demo.test.web.js b/components/progress/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..faf2faf935b
--- /dev/null
+++ b/components/progress/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('progress');
diff --git a/components/radio/__tests__/__snapshots__/demo.test.js.snap b/components/radio/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..8bd88c81503
--- /dev/null
+++ b/components/radio/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,663 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
+<View>
+  <View
+    style={
+      Object {
+        "padding": 10,
+      }
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Image
+        source={1}
+        style={
+          Array [
+            Object {
+              "height": 12,
+              "width": 15,
+            },
+            Object {
+              "borderColor": "#999",
+              "borderWidth": 1,
+              "margin": 10,
+            },
+          ]
+        }
+      />
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+      >
+        支持
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Image
+        source={undefined}
+        style={
+          Array [
+            Object {
+              "height": 12,
+              "width": 15,
+            },
+            Object {
+              "borderColor": "#999",
+              "borderWidth": 1,
+              "margin": 10,
+            },
+          ]
+        }
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 9,
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "marginTop": 12,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#ddd",
+          "borderTopWidth": 0.5,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "marginTop": 12,
+          }
+        }
+      >
+        表单单选项，普通列表中单选项
+      </Text>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                    },
+                    Object {},
+                  ]
+                }
+              >
+                使用 Ant Desgin Component
+              </Text>
+            </View>
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  },
+                ]
+              }
+              testID={undefined}
+            >
+              <Image
+                source={1}
+                style={
+                  Array [
+                    Object {
+                      "height": 12,
+                      "width": 15,
+                    },
+                    undefined,
+                  ]
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                    },
+                    Object {},
+                  ]
+                }
+              >
+                使用 Ant Desgin Component
+              </Text>
+            </View>
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  },
+                ]
+              }
+              testID={undefined}
+            >
+              <Image
+                source={undefined}
+                style={
+                  Array [
+                    Object {
+                      "height": 12,
+                      "width": 15,
+                    },
+                    undefined,
+                  ]
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                    },
+                    Object {
+                      "color": "#bbb",
+                    },
+                  ]
+                }
+              >
+                个性化调整disabled
+              </Text>
+            </View>
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  },
+                ]
+              }
+              testID={undefined}
+            >
+              <Image
+                source={undefined}
+                style={
+                  Array [
+                    Object {
+                      "height": 12,
+                      "width": 15,
+                    },
+                    undefined,
+                  ]
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                    },
+                    Object {
+                      "color": "#bbb",
+                    },
+                  ]
+                }
+              >
+                个性化调整disabled
+              </Text>
+            </View>
+            <View
+              accessibilityComponentType={undefined}
+              accessibilityLabel={undefined}
+              accessibilityTraits={undefined}
+              accessible={true}
+              hitSlop={undefined}
+              onLayout={undefined}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  },
+                ]
+              }
+              testID={undefined}
+            >
+              <Image
+                source={1}
+                style={
+                  Array [
+                    Object {
+                      "height": 12,
+                      "width": 15,
+                    },
+                    undefined,
+                  ]
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#fff",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "bottom": 0,
+              "height": 1,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/radio/__tests__/__snapshots__/demo.test.web.js.snap b/components/radio/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..aaf4d98beda
--- /dev/null
+++ b/components/radio/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,373 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/radio/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      RadioItem 演示
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        checked=""
+        class="am-radio-item am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            博士
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            <label
+              class="am-radio-wrapper"
+            >
+              <span
+                class="am-radio am-radio-checked"
+              >
+                <input
+                  checked=""
+                  class="am-radio-input"
+                  type="radio"
+                />
+                <span
+                  class="am-radio-inner"
+                />
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-radio-item am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            本科
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            <label
+              class="am-radio-wrapper"
+            >
+              <span
+                class="am-radio"
+              >
+                <input
+                  class="am-radio-input"
+                  type="radio"
+                />
+                <span
+                  class="am-radio-inner"
+                />
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-body"
+    >
+      <div
+        checked=""
+        class="am-radio-item am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            篮球
+            <div
+              class="am-list-brief"
+            >
+              辅助文字内容
+            </div>
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            <label
+              class="am-radio-wrapper"
+            >
+              <span
+                class="am-radio am-radio-checked"
+              >
+                <input
+                  checked=""
+                  class="am-radio-input"
+                  type="radio"
+                />
+                <span
+                  class="am-radio-inner"
+                />
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-radio-item am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            足球
+            <div
+              class="am-list-brief"
+            >
+              辅助文字内容
+            </div>
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            <label
+              class="am-radio-wrapper"
+            >
+              <span
+                class="am-radio"
+              >
+                <input
+                  class="am-radio-input"
+                  type="radio"
+                />
+                <span
+                  class="am-radio-inner"
+                />
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      禁用状态
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        checked=""
+        class="am-radio-item am-radio-item-disabled am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            博士
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            <label
+              class="am-radio-wrapper"
+            >
+              <span
+                class="am-radio am-radio-checked am-radio-disabled"
+              >
+                <input
+                  checked=""
+                  class="am-radio-input"
+                  disabled=""
+                  type="radio"
+                />
+                <span
+                  class="am-radio-inner"
+                />
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-radio-item am-radio-item-disabled am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            本科
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            <label
+              class="am-radio-wrapper"
+            >
+              <span
+                class="am-radio am-radio-disabled"
+              >
+                <input
+                  class="am-radio-input"
+                  disabled=""
+                  type="radio"
+                />
+                <span
+                  class="am-radio-inner"
+                />
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-body"
+    >
+      <div
+        checked=""
+        class="am-radio-item am-radio-item-disabled am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            篮球
+            <div
+              class="am-list-brief"
+            >
+              辅助文字内容
+            </div>
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            <label
+              class="am-radio-wrapper"
+            >
+              <span
+                class="am-radio am-radio-checked am-radio-disabled"
+              >
+                <input
+                  checked=""
+                  class="am-radio-input"
+                  disabled=""
+                  type="radio"
+                />
+                <span
+                  class="am-radio-inner"
+                />
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="am-radio-item am-radio-item-disabled am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            足球
+            <div
+              class="am-list-brief"
+            >
+              辅助文字内容
+            </div>
+          </div>
+          <div
+            class="am-list-extra"
+          >
+            <label
+              class="am-radio-wrapper"
+            >
+              <span
+                class="am-radio am-radio-disabled"
+              >
+                <input
+                  class="am-radio-input"
+                  disabled=""
+                  type="radio"
+                />
+                <span
+                  class="am-radio-inner"
+                />
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-flexbox am-flexbox-align-middle"
+    style="padding:0.3rem;"
+  >
+    <div
+      class="am-flexbox-item"
+      style="padding:0.3rem 0;color:#888;flex:none;"
+    >
+      Radio 演示 (自定义样式)
+    </div>
+    <div
+      class="am-flexbox-item"
+    >
+      <label
+        class="my-radio am-radio-wrapper"
+      >
+        <span
+          class="am-radio"
+        >
+          <input
+            class="am-radio-input"
+            type="radio"
+          />
+          <span
+            class="am-radio-inner"
+          />
+        </span>
+        同意协议
+      </label>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/radio/__tests__/demo.test.js b/components/radio/__tests__/demo.test.js
new file mode 100644
index 00000000000..c7772f5e283
--- /dev/null
+++ b/components/radio/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('radio');
diff --git a/components/radio/__tests__/demo.test.web.js b/components/radio/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..47c21698193
--- /dev/null
+++ b/components/radio/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('radio');
diff --git a/components/range/__tests__/__snapshots__/demo.test.web.js.snap b/components/range/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..e503ccfe7db
--- /dev/null
+++ b/components/range/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/range/demo/basic.md correctly 1`] = `
+<div
+  class="am-slider-example"
+>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <p
+      class="title"
+    >
+      Range, 基础使用
+    </p>
+    <div
+      class="am-slider-wrapper"
+    >
+      <div
+        class="am-slider"
+      >
+        <div
+          class="am-slider-rail"
+        />
+        <div
+          class="am-slider-track am-slider-track-1"
+          style="visibility:visible;left:15%;width:35%;"
+        />
+        <div
+          class="am-slider-step"
+        />
+        <div
+          class="am-slider-handle am-slider-handle-1"
+          style="left:15%;"
+        />
+        <div
+          class="am-slider-handle am-slider-handle-2"
+          style="left:50%;"
+        />
+        <div
+          class="am-slider-mark"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <p
+      class="title"
+    >
+      Range, 带 Tooltip
+    </p>
+    <div
+      class="am-slider-wrapper"
+    >
+      <div
+        class="am-slider"
+      >
+        <div
+          class="am-slider-rail"
+        />
+        <div
+          class="am-slider-track am-slider-track-1"
+          style="visibility:visible;left:15%;width:35%;"
+        />
+        <div
+          class="am-slider-step"
+        />
+        <div
+          class="am-slider-handle am-slider-handle-1"
+          style="left:15%;"
+        />
+        <div
+          class="am-slider-handle am-slider-handle-2"
+          style="left:50%;"
+        />
+        <div
+          class="am-slider-mark"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <p
+      class="title"
+    >
+      Range, 禁用
+    </p>
+    <div
+      class="am-slider-wrapper"
+    >
+      <div
+        class="am-slider am-slider-disabled"
+      >
+        <div
+          class="am-slider-rail"
+        />
+        <div
+          class="am-slider-track am-slider-track-1"
+          style="visibility:visible;left:15%;width:35%;"
+        />
+        <div
+          class="am-slider-step"
+        />
+        <div
+          class="am-slider-handle am-slider-handle-1"
+          disabled=""
+          style="left:15%;"
+        />
+        <div
+          class="am-slider-handle am-slider-handle-2"
+          disabled=""
+          style="left:50%;"
+        />
+        <div
+          class="am-slider-mark"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/range/__tests__/demo.test.web.js b/components/range/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..70015857800
--- /dev/null
+++ b/components/range/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('range');
diff --git a/components/refresh-control/__tests__/__snapshots__/demo.test.js.snap b/components/refresh-control/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..1ae8769a942
--- /dev/null
+++ b/components/refresh-control/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,789 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/refresh-control/demo/basic.tsx correctly 1`] = `
+<ScrollView
+  refreshControl={
+    <RefreshControl
+      colors={
+        Array [
+          "#ff0000",
+          "#00ff00",
+          "#0000ff",
+        ]
+      }
+      onRefresh={[Function]}
+      progressBackgroundColor="#ffff00"
+      refreshing={false}
+      tintColor="#ff0000"
+      title="Loading..."
+      titleColor="#00ff00"
+    />
+  }
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 0 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 1 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 2 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 3 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 4 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 5 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 6 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 7 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 8 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 9 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 10 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 11 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 12 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 13 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 14 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 15 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 16 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 17 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 18 (0 clicks)
+    </Text>
+  </View>
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#3a5795",
+        "borderColor": "grey",
+        "borderWidth": 1,
+        "margin": 5,
+        "padding": 20,
+      }
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#fff",
+        }
+      }
+    >
+      Initial row 19 (0 clicks)
+    </Text>
+  </View>
+</ScrollView>
+`;
diff --git a/components/refresh-control/__tests__/__snapshots__/demo.test.web.js.snap b/components/refresh-control/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..9a7bea1a77d
--- /dev/null
+++ b/components/refresh-control/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,230 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/refresh-control/demo/basic.md correctly 1`] = `
+<div
+  class="am-list-view-scrollview"
+  style="position:relative;overflow:hidden;flex:1;height:0;border:1px solid #ddd;margin:0.1rem 0;"
+>
+  <div
+    class="am-list-view-scrollview-content am-list"
+    style="position:absolute;min-width:100%;"
+  >
+    <div
+      class="am-refresh-control-ptr"
+    >
+      <div
+        class="am-refresh-control-ptr-icon"
+      >
+        <div
+          class="am-refresh-control-pull"
+        >
+          <span>
+            下拉可以刷新
+          </span>
+        </div>
+        <div
+          class="am-refresh-control-release"
+        >
+          <span>
+            松开立即刷新
+          </span>
+        </div>
+      </div>
+      <div
+        class="am-refresh-control-ptr-loading"
+      >
+        <svg
+          class="am-icon am-icon-loading am-icon-md"
+        >
+          <use
+            xlink:href="#loading"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="list-view-section-body"
+      >
+        <div
+          style="padding:0.08rem 0.16rem;background-color:white;"
+        >
+          <h3
+            style="padding:2px;margin-bottom:0.08rem;border-bottom:1px solid #F6F6F6;"
+          >
+            食惠周
+          </h3>
+          <div
+            style="display:flex;"
+          >
+            <img
+              src="https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png"
+              style="height:1.28rem;margin-right:0.08rem;"
+            />
+            <div
+              style="display:inline-block;"
+            >
+              <p>
+                不是所有的兼职汪都需要风吹日晒-r0
+              </p>
+              <p>
+                <span
+                  style="font-size:1.6em;color:#FF6E27;"
+                >
+                  35
+                </span>
+                元/任务
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          style="background-color:#F5F5F9;height:8px;border-top:1px solid #ECECED;border-bottom:1px solid #ECECED;"
+        />
+        <div
+          style="padding:0.08rem 0.16rem;background-color:white;"
+        >
+          <h3
+            style="padding:2px;margin-bottom:0.08rem;border-bottom:1px solid #F6F6F6;"
+          >
+            麦当劳邀您过周末
+          </h3>
+          <div
+            style="display:flex;"
+          >
+            <img
+              src="https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png"
+              style="height:1.28rem;margin-right:0.08rem;"
+            />
+            <div
+              style="display:inline-block;"
+            >
+              <p>
+                不是所有的兼职汪都需要风吹日晒-r1
+              </p>
+              <p>
+                <span
+                  style="font-size:1.6em;color:#FF6E27;"
+                >
+                  35
+                </span>
+                元/任务
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          style="background-color:#F5F5F9;height:8px;border-top:1px solid #ECECED;border-bottom:1px solid #ECECED;"
+        />
+        <div
+          style="padding:0.08rem 0.16rem;background-color:white;"
+        >
+          <h3
+            style="padding:2px;margin-bottom:0.08rem;border-bottom:1px solid #F6F6F6;"
+          >
+            相约酒店
+          </h3>
+          <div
+            style="display:flex;"
+          >
+            <img
+              src="https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png"
+              style="height:1.28rem;margin-right:0.08rem;"
+            />
+            <div
+              style="display:inline-block;"
+            >
+              <p>
+                不是所有的兼职汪都需要风吹日晒-r2
+              </p>
+              <p>
+                <span
+                  style="font-size:1.6em;color:#FF6E27;"
+                >
+                  35
+                </span>
+                元/任务
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          style="background-color:#F5F5F9;height:8px;border-top:1px solid #ECECED;border-bottom:1px solid #ECECED;"
+        />
+        <div
+          style="padding:0.08rem 0.16rem;background-color:white;"
+        >
+          <h3
+            style="padding:2px;margin-bottom:0.08rem;border-bottom:1px solid #F6F6F6;"
+          >
+            食惠周
+          </h3>
+          <div
+            style="display:flex;"
+          >
+            <img
+              src="https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png"
+              style="height:1.28rem;margin-right:0.08rem;"
+            />
+            <div
+              style="display:inline-block;"
+            >
+              <p>
+                不是所有的兼职汪都需要风吹日晒-r3
+              </p>
+              <p>
+                <span
+                  style="font-size:1.6em;color:#FF6E27;"
+                >
+                  35
+                </span>
+                元/任务
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          style="background-color:#F5F5F9;height:8px;border-top:1px solid #ECECED;border-bottom:1px solid #ECECED;"
+        />
+        <div
+          style="padding:0.08rem 0.16rem;background-color:white;"
+        >
+          <h3
+            style="padding:2px;margin-bottom:0.08rem;border-bottom:1px solid #F6F6F6;"
+          >
+            麦当劳邀您过周末
+          </h3>
+          <div
+            style="display:flex;"
+          >
+            <img
+              src="https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png"
+              style="height:1.28rem;margin-right:0.08rem;"
+            />
+            <div
+              style="display:inline-block;"
+            >
+              <p>
+                不是所有的兼职汪都需要风吹日晒-r4
+              </p>
+              <p>
+                <span
+                  style="font-size:1.6em;color:#FF6E27;"
+                >
+                  35
+                </span>
+                元/任务
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          style="background-color:#F5F5F9;height:8px;border-top:1px solid #ECECED;border-bottom:1px solid #ECECED;"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/refresh-control/__tests__/demo.test.js b/components/refresh-control/__tests__/demo.test.js
new file mode 100644
index 00000000000..3d101ab3d28
--- /dev/null
+++ b/components/refresh-control/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('refresh-control');
diff --git a/components/refresh-control/__tests__/demo.test.web.js b/components/refresh-control/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..f0dec26a05b
--- /dev/null
+++ b/components/refresh-control/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('refresh-control');
diff --git a/components/result/__tests__/__snapshots__/demo.test.js.snap b/components/result/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..2eaaaee82f6
--- /dev/null
+++ b/components/result/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,450 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/result/demo/basic.tsx correctly 1`] = `
+<ScrollView
+  style={
+    Object {
+      "backgroundColor": "#F5F5F9",
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Object {
+        "color": "#999",
+        "margin": 10,
+      }
+    }
+  >
+    uri
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#fff",
+          "borderBottomColor": "#ddd",
+          "paddingVertical": 21,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "margin": 0,
+        }
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "https://zos.alipayobjects.com/rmsportal/GcBguhrOdlYvGfnsXgrE.png",
+          }
+        }
+        style={
+          Object {
+            "height": 60,
+            "width": 60,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "marginTop": 15,
+          "paddingHorizontal": 15,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "color": "#000",
+            "fontSize": 21,
+          }
+        }
+      >
+        验证成功
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "marginTop": 15,
+          "paddingHorizontal": 15,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "color": "#888",
+            "fontSize": 16,
+          }
+        }
+      >
+        所提交内容已成功完成验证
+      </Text>
+    </View>
+  </View>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Object {
+        "color": "#999",
+        "margin": 10,
+      }
+    }
+  >
+    require
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#fff",
+          "borderBottomColor": "#ddd",
+          "paddingVertical": 21,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "margin": 0,
+        }
+      }
+    >
+      <Image
+        source={
+          Object {
+            "default": true,
+          }
+        }
+        style={
+          Object {
+            "height": 60,
+            "width": 60,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "marginTop": 15,
+          "paddingHorizontal": 15,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "color": "#000",
+            "fontSize": 21,
+          }
+        }
+      >
+        验证成功
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "marginTop": 15,
+          "paddingHorizontal": 15,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "color": "#888",
+            "fontSize": 16,
+          }
+        }
+      >
+        所提交内容已成功完成验证
+      </Text>
+    </View>
+  </View>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Object {
+        "color": "#999",
+        "margin": 10,
+      }
+    }
+  >
+    img
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#fff",
+          "borderBottomColor": "#ddd",
+          "paddingVertical": 21,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "margin": 0,
+        }
+      }
+    >
+      <Image
+        source={
+          Object {
+            "default": true,
+          }
+        }
+        style={
+          Object {
+            "height": 60,
+            "width": 60,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "marginTop": 15,
+          "paddingHorizontal": 15,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "color": "#000",
+            "fontSize": 21,
+          }
+        }
+      >
+        验证成功
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "marginTop": 15,
+          "paddingHorizontal": 15,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+      >
+        所提交内容已成功完成验证
+      </Text>
+    </View>
+  </View>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Object {
+        "color": "#999",
+        "margin": 10,
+      }
+    }
+  >
+    button
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#fff",
+          "borderBottomColor": "#ddd",
+          "paddingVertical": 21,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "margin": 0,
+        }
+      }
+    >
+      <Image
+        source={
+          Object {
+            "default": true,
+          }
+        }
+        style={
+          Object {
+            "height": 60,
+            "width": 60,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "marginTop": 15,
+          "paddingHorizontal": 15,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "color": "#000",
+            "fontSize": 21,
+          }
+        }
+      >
+        验证成功
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "marginTop": 15,
+          "paddingHorizontal": 15,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "color": "#888",
+            "fontSize": 16,
+          }
+        }
+      >
+        所提交内容已成功完成验证
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "marginTop": 15,
+          "paddingHorizontal": 15,
+        }
+      }
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            Array [
+              Object {
+                "alignItems": "center",
+                "borderRadius": 5,
+                "borderWidth": 1,
+                "justifyContent": "center",
+              },
+              Object {
+                "height": 42,
+                "paddingLeft": 15,
+                "paddingRight": 15,
+              },
+              Object {
+                "backgroundColor": "#108ee9",
+                "borderColor": "#108ee9",
+              },
+              false,
+              false,
+              false,
+              Object {
+                "flex": 1,
+              },
+            ],
+          ]
+        }
+        testID={undefined}
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "fontSize": 18,
+              },
+              Object {
+                "color": "#fff",
+              },
+              false,
+              false,
+            ]
+          }
+        >
+          完成
+        </Text>
+      </View>
+    </View>
+  </View>
+</ScrollView>
+`;
diff --git a/components/result/__tests__/__snapshots__/demo.test.web.js.snap b/components/result/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..21570968cc9
--- /dev/null
+++ b/components/result/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/result/demo/basic.md correctly 1`] = `
+<div
+  class="result-example"
+>
+  <div
+    class="sub-title"
+  >
+    支付成功
+  </div>
+  <div
+    class="am-result"
+  >
+    <div
+      class="am-result-pic"
+    >
+      <svg
+        class="am-icon am-icon-[object Object] am-icon-md icon"
+      >
+        <use
+          xlink:href="#[object Object]"
+        />
+      </svg>
+    </div>
+    <div
+      class="am-result-title"
+    >
+      支付成功
+    </div>
+    <div
+      class="am-result-message"
+    >
+      <div>
+        <div
+          style="font-size:0.72rem;color:#000;line-height:1;"
+        >
+          998.00
+        </div>
+        <del>
+          1098元
+        </del>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="sub-title"
+  >
+    验证成功
+  </div>
+  <div
+    class="am-result"
+  >
+    <div
+      class="am-result-pic"
+    >
+      <svg
+        class="am-icon am-icon-check-circle am-icon-md icon"
+        style="fill:#1F90E6;"
+      >
+        <use
+          xlink:href="#check-circle"
+        />
+      </svg>
+    </div>
+    <div
+      class="am-result-title"
+    >
+      验证成功
+    </div>
+    <div
+      class="am-result-message"
+    >
+      所提交内容已成功完成验证
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="sub-title"
+  >
+    支付失败
+  </div>
+  <div
+    class="am-result"
+  >
+    <div
+      class="am-result-pic"
+    >
+      <svg
+        class="am-icon am-icon-cross-circle-o am-icon-md icon"
+        style="fill:#F13642;"
+      >
+        <use
+          xlink:href="#cross-circle-o"
+        />
+      </svg>
+    </div>
+    <div
+      class="am-result-title"
+    >
+      支付失败
+    </div>
+    <div
+      class="am-result-message"
+    >
+      所选银行卡余额不足
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="sub-title"
+  >
+    等待处理
+  </div>
+  <div
+    class="am-result"
+  >
+    <div
+      class="am-result-pic"
+    >
+      <svg
+        class="am-icon am-icon-[object Object] am-icon-md icon"
+      >
+        <use
+          xlink:href="#[object Object]"
+        />
+      </svg>
+    </div>
+    <div
+      class="am-result-title"
+    >
+      等待处理
+    </div>
+    <div
+      class="am-result-message"
+    >
+      已提交申请，等待银行处理
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="sub-title"
+  >
+    操作失败
+  </div>
+  <div
+    class="am-result"
+  >
+    <div
+      class="am-result-pic"
+    >
+      <svg
+        class="am-icon am-icon-[object Object] am-icon-md icon"
+      >
+        <use
+          xlink:href="#[object Object]"
+        />
+      </svg>
+    </div>
+    <div
+      class="am-result-title"
+    >
+      无法完成操作
+    </div>
+    <div
+      class="am-result-message"
+    >
+      由于你的支付宝账户还未绑定淘宝账户请登请登录www.taobao.com
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/result/__tests__/demo.test.js b/components/result/__tests__/demo.test.js
new file mode 100644
index 00000000000..d803ee61eef
--- /dev/null
+++ b/components/result/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('result');
diff --git a/components/result/__tests__/demo.test.web.js b/components/result/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..a4b5299450d
--- /dev/null
+++ b/components/result/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('result');
diff --git a/components/search-bar/__tests__/__snapshots__/demo.test.js.snap b/components/search-bar/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..bd8c9245714
--- /dev/null
+++ b/components/search-bar/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,155 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/search-bar/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "marginTop": 30,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#ddd",
+        "flexDirection": "row",
+        "paddingBottom": 8,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingTop": 8,
+      }
+    }
+  >
+    <TextInput
+      clearButtonMode="always"
+      defaultValue="初始值"
+      editable={true}
+      onBlur={[Function]}
+      onChangeText={[Function]}
+      onClear={[Function]}
+      onFocus={[Function]}
+      onSubmit={[Function]}
+      onSubmitEditing={[Function]}
+      placeholder="搜索"
+      prefixCls="am-search"
+      style={
+        Object {
+          "alignSelf": "stretch",
+          "backgroundColor": "#fff",
+          "borderColor": "#ddd",
+          "borderRadius": 5,
+          "borderWidth": 0.5,
+          "color": "#000",
+          "flex": 1,
+          "fontSize": 14,
+          "height": 28,
+          "paddingBottom": 0,
+          "paddingLeft": 35,
+          "paddingRight": 35,
+          "paddingTop": 0,
+        }
+      }
+      underlineColorAndroid="transparent"
+      value="初始值"
+    />
+    <Image
+      resizeMode="stretch"
+      source={1}
+      style={
+        Object {
+          "height": 15,
+          "left": 16,
+          "position": "absolute",
+          "tintColor": "#ccc",
+          "top": 14.5,
+          "width": 15,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#ddd",
+        "flexDirection": "row",
+        "paddingBottom": 8,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingTop": 8,
+      }
+    }
+  >
+    <TextInput
+      clearButtonMode="always"
+      editable={true}
+      onBlur={[Function]}
+      onCancel={[Function]}
+      onChangeText={[Function]}
+      onClear={[Function]}
+      onFocus={[Function]}
+      onSubmit={[Function]}
+      onSubmitEditing={[Function]}
+      placeholder="搜索"
+      prefixCls="am-search"
+      style={
+        Object {
+          "alignSelf": "stretch",
+          "backgroundColor": "#fff",
+          "borderColor": "#ddd",
+          "borderRadius": 5,
+          "borderWidth": 0.5,
+          "color": "#000",
+          "flex": 1,
+          "fontSize": 14,
+          "height": 28,
+          "paddingBottom": 0,
+          "paddingLeft": 35,
+          "paddingRight": 35,
+          "paddingTop": 0,
+        }
+      }
+      underlineColorAndroid="transparent"
+      value="美食"
+    />
+    <Image
+      resizeMode="stretch"
+      source={1}
+      style={
+        Object {
+          "height": 15,
+          "left": 16,
+          "position": "absolute",
+          "tintColor": "#ccc",
+          "top": 14.5,
+          "width": 15,
+        }
+      }
+    />
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "height": 28,
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        onPress={[Function]}
+        style={
+          Object {
+            "color": "#108ee9",
+            "fontSize": 16,
+            "paddingLeft": 15,
+          }
+        }
+      >
+        取消
+      </Text>
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/search-bar/__tests__/__snapshots__/demo.test.web.js.snap b/components/search-bar/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..8af880dbfc1
--- /dev/null
+++ b/components/search-bar/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,222 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/search-bar/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <div
+      class="sub-title"
+    >
+      普通
+    </div>
+  </div>
+  <form
+    class="am-search"
+  >
+    <div
+      class="am-search-input"
+    >
+      <div
+        class="am-search-synthetic-ph"
+      >
+        <span
+          class="am-search-synthetic-ph-container"
+        >
+          <i
+            class="am-search-synthetic-ph-icon"
+          />
+          <span
+            class="am-search-synthetic-ph-placeholder"
+            style="visibility:visible;"
+          >
+            搜索
+          </span>
+        </span>
+      </div>
+      <input
+        class="am-search-value"
+        placeholder="搜索"
+        type="search"
+        value=""
+      />
+      <a
+        class="am-search-clear"
+      />
+    </div>
+    <div
+      class="am-search-cancel"
+    >
+      取消
+    </div>
+  </form>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <div
+      class="sub-title"
+    >
+      自动获取光标
+    </div>
+  </div>
+  <form
+    class="am-search"
+  >
+    <div
+      class="am-search-input"
+    >
+      <div
+        class="am-search-synthetic-ph"
+      >
+        <span
+          class="am-search-synthetic-ph-container"
+        >
+          <i
+            class="am-search-synthetic-ph-icon"
+          />
+          <span
+            class="am-search-synthetic-ph-placeholder"
+            style="visibility:visible;"
+          >
+            自动获取光标
+          </span>
+        </span>
+      </div>
+      <input
+        class="am-search-value"
+        placeholder="自动获取光标"
+        type="search"
+        value=""
+      />
+      <a
+        class="am-search-clear"
+      />
+    </div>
+    <div
+      class="am-search-cancel"
+    >
+      取消
+    </div>
+  </form>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <div
+      class="sub-title"
+    >
+      手动获取获取光标
+    </div>
+  </div>
+  <form
+    class="am-search"
+  >
+    <div
+      class="am-search-input"
+    >
+      <div
+        class="am-search-synthetic-ph"
+      >
+        <span
+          class="am-search-synthetic-ph-container"
+        >
+          <i
+            class="am-search-synthetic-ph-icon"
+          />
+          <span
+            class="am-search-synthetic-ph-placeholder"
+            style="visibility:visible;"
+          >
+            手动获取获取光标
+          </span>
+        </span>
+      </div>
+      <input
+        class="am-search-value"
+        placeholder="手动获取获取光标"
+        type="search"
+        value=""
+      />
+      <a
+        class="am-search-clear"
+      />
+    </div>
+    <div
+      class="am-search-cancel"
+    >
+      取消
+    </div>
+  </form>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <a
+      class="am-button am-button-primary"
+      role="button"
+    >
+      <span>
+        点击获取光标
+      </span>
+    </a>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <div
+      class="sub-title"
+    >
+      显示取消按钮
+    </div>
+  </div>
+  <form
+    class="am-search am-search-start"
+  >
+    <div
+      class="am-search-input"
+    >
+      <div
+        class="am-search-synthetic-ph"
+      >
+        <span
+          class="am-search-synthetic-ph-container"
+        >
+          <i
+            class="am-search-synthetic-ph-icon"
+          />
+          <span
+            class="am-search-synthetic-ph-placeholder"
+            style="visibility:hidden;"
+          >
+            搜索
+          </span>
+        </span>
+      </div>
+      <input
+        class="am-search-value"
+        placeholder="搜索"
+        type="search"
+        value="美食"
+      />
+      <a
+        class="am-search-clear"
+      />
+    </div>
+    <div
+      class="am-search-cancel am-search-cancel-show"
+    >
+      取消
+    </div>
+  </form>
+</div>
+`;
diff --git a/components/search-bar/__tests__/demo.test.js b/components/search-bar/__tests__/demo.test.js
new file mode 100644
index 00000000000..04910cf87b7
--- /dev/null
+++ b/components/search-bar/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('search-bar');
diff --git a/components/search-bar/__tests__/demo.test.web.js b/components/search-bar/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..ccfff9a6d89
--- /dev/null
+++ b/components/search-bar/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('search-bar');
diff --git a/components/segmented-control/__tests__/__snapshots__/demo.test.js.snap b/components/segmented-control/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..0e512f5d3af
--- /dev/null
+++ b/components/segmented-control/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,158 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/segmented-control/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "paddingHorizontal": 20,
+      "paddingTop": 60,
+    }
+  }
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+  >
+    禁用/disabled
+  </Text>
+  <RCTSegmentedControl
+    enabled={false}
+    onChange={[Function]}
+    selectedIndex={0}
+    style={
+      Array [
+        Object {
+          "height": 28,
+        },
+        undefined,
+      ]
+    }
+    tintColor="#108ee9"
+    values={
+      Array [
+        "切换一",
+        "切换二",
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+  >
+    设置 tintColor, style 
+  </Text>
+  <RCTSegmentedControl
+    enabled={true}
+    onChange={[Function]}
+    selectedIndex={0}
+    style={
+      Array [
+        Object {
+          "height": 28,
+        },
+        Object {
+          "height": 40,
+          "width": 280,
+        },
+      ]
+    }
+    tintColor="#ff0000"
+    values={
+      Array [
+        "切换一",
+        "切换二",
+        "切换三",
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+  >
+    设置默认选中 selectedIndex 
+  </Text>
+  <RCTSegmentedControl
+    enabled={true}
+    onChange={[Function]}
+    selectedIndex={1}
+    style={
+      Array [
+        Object {
+          "height": 28,
+        },
+        undefined,
+      ]
+    }
+    tintColor="#108ee9"
+    values={
+      Array [
+        "切换一",
+        "切换二",
+        "切换三",
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+  >
+    事件 onChange/onValueChange 
+  </Text>
+  <RCTSegmentedControl
+    enabled={true}
+    onChange={[Function]}
+    onValueChange={[Function]}
+    selectedIndex={0}
+    style={
+      Array [
+        Object {
+          "height": 28,
+        },
+        undefined,
+      ]
+    }
+    tintColor="#108ee9"
+    values={
+      Array [
+        "切换一",
+        "切换二",
+        "切换三",
+      ]
+    }
+  />
+</View>
+`;
diff --git a/components/segmented-control/__tests__/__snapshots__/demo.test.web.js.snap b/components/segmented-control/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..7766f0ba716
--- /dev/null
+++ b/components/segmented-control/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/segmented-control/demo/basic.md correctly 1`] = `
+<div
+  class="am-wingblank am-wingblank-lg sc-example"
+>
+  <p
+    class="sub-title"
+  >
+    最简
+  </p>
+  <div
+    class="am-segment"
+  >
+    <div
+      class="am-segment-item am-segment-item-selected"
+      style="color:#fff;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换一
+    </div>
+    <div
+      class="am-segment-item"
+      style="background-color:#fff;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换二
+    </div>
+  </div>
+  <p
+    class="sub-title"
+  >
+    禁用
+  </p>
+  <div
+    class="am-segment am-segment-disabled"
+  >
+    <div
+      class="am-segment-item am-segment-item-selected"
+      style="color:#fff;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换一
+    </div>
+    <div
+      class="am-segment-item"
+      style="background-color:#fff;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换二
+    </div>
+  </div>
+  <p
+    class="sub-title"
+  >
+    默认选中一项
+  </p>
+  <div
+    class="am-segment"
+  >
+    <div
+      class="am-segment-item"
+      style="background-color:#fff;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换一
+    </div>
+    <div
+      class="am-segment-item am-segment-item-selected"
+      style="color:#fff;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换二
+    </div>
+    <div
+      class="am-segment-item"
+      style="background-color:#fff;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换三
+    </div>
+  </div>
+  <p
+    class="sub-title"
+  >
+    主色调样式 tintColor
+  </p>
+  <div
+    class="am-segment"
+    style="height:0.8rem;width:5rem;"
+  >
+    <div
+      class="am-segment-item am-segment-item-selected"
+      style="color:#fff;background-color:#ff0000;border-color:#ff0000;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换一
+    </div>
+    <div
+      class="am-segment-item"
+      style="color:#ff0000;background-color:#fff;border-color:#ff0000;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换二
+    </div>
+    <div
+      class="am-segment-item"
+      style="color:#ff0000;background-color:#fff;border-color:#ff0000;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换三
+    </div>
+  </div>
+  <p
+    class="sub-title"
+  >
+    事件
+  </p>
+  <div
+    class="am-segment"
+  >
+    <div
+      class="am-segment-item am-segment-item-selected"
+      style="color:#fff;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换一
+    </div>
+    <div
+      class="am-segment-item"
+      style="background-color:#fff;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换二
+    </div>
+    <div
+      class="am-segment-item"
+      style="background-color:#fff;"
+    >
+      <div
+        class="am-segment-item-inner"
+      />
+      切换三
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/segmented-control/__tests__/demo.test.js b/components/segmented-control/__tests__/demo.test.js
new file mode 100644
index 00000000000..c030e7d819c
--- /dev/null
+++ b/components/segmented-control/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('segmented-control');
diff --git a/components/segmented-control/__tests__/demo.test.web.js b/components/segmented-control/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..c0f08c42c8e
--- /dev/null
+++ b/components/segmented-control/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('segmented-control');
diff --git a/components/slider/__tests__/__snapshots__/demo.test.js.snap b/components/slider/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..356e156b3a4
--- /dev/null
+++ b/components/slider/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,283 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
+<View>
+  <View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      Default settings
+    </Text>
+    <View>
+      <RCTSlider
+        disabled={false}
+        enabled={true}
+        maximumTrackTintColor="#ccc"
+        maximumValue={1}
+        minimumTrackTintColor="#2db7f5"
+        minimumValue={0}
+        onChange={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onSlidingComplete={[Function]}
+        onStartShouldSetResponder={[Function]}
+        onValueChange={[Function]}
+        step={0}
+        style={
+          Array [
+            Object {
+              "height": 40,
+            },
+            undefined,
+          ]
+        }
+        value={0}
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "marginTop": 20,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      Initial value: 0.5
+    </Text>
+    <View>
+      <RCTSlider
+        disabled={false}
+        enabled={true}
+        maximumTrackTintColor="#ccc"
+        maximumValue={1}
+        minimumTrackTintColor="#2db7f5"
+        minimumValue={0}
+        onChange={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onSlidingComplete={[Function]}
+        onStartShouldSetResponder={[Function]}
+        onValueChange={[Function]}
+        step={0}
+        style={
+          Array [
+            Object {
+              "height": 40,
+            },
+            undefined,
+          ]
+        }
+        value={0.5}
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "marginTop": 20,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      min: 0, max: 1, current Value: 
+      0
+    </Text>
+    <View>
+      <RCTSlider
+        disabled={false}
+        enabled={true}
+        maximumTrackTintColor="#ccc"
+        maximumValue={1}
+        minimumTrackTintColor="#2db7f5"
+        minimumValue={0}
+        onChange={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onSlidingComplete={[Function]}
+        onStartShouldSetResponder={[Function]}
+        onValueChange={[Function]}
+        step={0}
+        style={
+          Array [
+            Object {
+              "height": 40,
+            },
+            undefined,
+          ]
+        }
+        value={0}
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "marginTop": 20,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      step: 0.25
+    </Text>
+    <View>
+      <RCTSlider
+        disabled={false}
+        enabled={true}
+        maximumTrackTintColor="#ccc"
+        maximumValue={1}
+        minimumTrackTintColor="#2db7f5"
+        minimumValue={0}
+        onChange={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onSlidingComplete={[Function]}
+        onStartShouldSetResponder={[Function]}
+        onValueChange={[Function]}
+        step={0.25}
+        style={
+          Array [
+            Object {
+              "height": 40,
+            },
+            undefined,
+          ]
+        }
+        value={0.25}
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "marginTop": 20,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      disabled
+    </Text>
+    <View>
+      <RCTSlider
+        disabled={true}
+        enabled={false}
+        maximumTrackTintColor="#ccc"
+        maximumValue={1}
+        minimumTrackTintColor="#2db7f5"
+        minimumValue={0}
+        onChange={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onSlidingComplete={[Function]}
+        onStartShouldSetResponder={[Function]}
+        onValueChange={[Function]}
+        step={0}
+        style={
+          Array [
+            Object {
+              "height": 40,
+            },
+            undefined,
+          ]
+        }
+        value={0.25}
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "marginTop": 20,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      onChange value: 
+      0.25
+    </Text>
+    <View>
+      <RCTSlider
+        disabled={false}
+        enabled={true}
+        maximumTrackTintColor="#ccc"
+        maximumValue={1}
+        minimumTrackTintColor="#2db7f5"
+        minimumValue={0}
+        onChange={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onSlidingComplete={[Function]}
+        onStartShouldSetResponder={[Function]}
+        onValueChange={[Function]}
+        step={0}
+        style={
+          Array [
+            Object {
+              "height": 40,
+            },
+            undefined,
+          ]
+        }
+        value={0.25}
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "marginTop": 20,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      onAfterChange value: 
+      0.15
+    </Text>
+    <View>
+      <RCTSlider
+        disabled={false}
+        enabled={true}
+        maximumTrackTintColor="#ccc"
+        maximumValue={1}
+        minimumTrackTintColor="#2db7f5"
+        minimumValue={0}
+        onChange={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onSlidingComplete={[Function]}
+        onStartShouldSetResponder={[Function]}
+        onValueChange={[Function]}
+        step={0}
+        style={
+          Array [
+            Object {
+              "height": 40,
+            },
+            undefined,
+          ]
+        }
+        value={0.15}
+      />
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/slider/__tests__/__snapshots__/demo.test.web.js.snap b/components/slider/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..8b85ca58c01
--- /dev/null
+++ b/components/slider/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,230 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
+<div
+  class="am-slider-example"
+>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <p
+      class="title"
+    >
+      Slider
+    </p>
+    <div
+      class="am-slider-wrapper"
+    >
+      <div
+        class="am-slider"
+      >
+        <div
+          class="am-slider-rail"
+        />
+        <div
+          class="am-slider-track"
+          style="visibility:visible;left:0%;width:86.66666666666667%;"
+        />
+        <div
+          class="am-slider-step"
+        />
+        <div
+          class="am-slider-handle"
+          style="left:86.66666666666667%;"
+        />
+        <div
+          class="am-slider-mark"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <p
+      class="title"
+    >
+      Slider 带 ToolTip
+    </p>
+    <div
+      class="am-slider-wrapper"
+    >
+      <div
+        class="am-slider"
+      >
+        <div
+          class="am-slider-rail"
+        />
+        <div
+          class="am-slider-track"
+          style="visibility:visible;left:0%;width:86.66666666666667%;"
+        />
+        <div
+          class="am-slider-step"
+        />
+        <div
+          class="am-slider-handle"
+          style="left:86.66666666666667%;"
+        />
+        <div
+          class="am-slider-mark"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <p
+      class="title"
+    >
+      Slider 禁用
+    </p>
+    <div
+      class="am-slider-wrapper"
+    >
+      <div
+        class="am-slider am-slider-disabled"
+      >
+        <div
+          class="am-slider-rail"
+        />
+        <div
+          class="am-slider-track"
+          style="visibility:visible;left:0%;width:86.66666666666667%;"
+        />
+        <div
+          class="am-slider-step"
+        />
+        <div
+          class="am-slider-handle"
+          disabled=""
+          style="left:86.66666666666667%;"
+        />
+        <div
+          class="am-slider-mark"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/slider/demo/custom-tooltip.md correctly 1`] = `
+<div
+  class="am-slider-example"
+>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <p
+      class="title"
+    >
+      Slider 自定义 ToolTip
+    </p>
+    <div
+      class="am-slider-wrapper"
+    >
+      <div
+        class="am-slider"
+      >
+        <div
+          class="am-slider-rail"
+        />
+        <div
+          class="am-slider-track"
+          style="visibility:visible;left:0%;width:86.66666666666667%;"
+        />
+        <div
+          class="am-slider-step"
+        />
+        <div>
+          <div
+            class="am-slider-handle"
+            style="left:86.66666666666667%;"
+          />
+          <div
+            style="text-align:center;"
+          />
+        </div>
+        <div
+          class="am-slider-mark"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+</div>
+`;
+
+exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
+<div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <div
+      class="iconWrapper"
+    >
+      <svg
+        class="am-icon am-icon-check-circle am-icon-md anticon-highlight"
+      >
+        <use
+          xlink:href="#check-circle"
+        />
+      </svg>
+      <div
+        class="am-slider-wrapper"
+      >
+        <div
+          class="am-slider"
+        >
+          <div
+            class="am-slider-rail"
+          />
+          <div
+            class="am-slider-track"
+            style="visibility:visible;left:0%;width:0%;"
+          />
+          <div
+            class="am-slider-step"
+          />
+          <div
+            class="am-slider-handle"
+            style="left:0%;"
+          />
+          <div
+            class="am-slider-mark"
+          />
+        </div>
+      </div>
+      <svg
+        class="am-icon am-icon-cross-circle am-icon-md"
+      >
+        <use
+          xlink:href="#cross-circle"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+</div>
+`;
diff --git a/components/slider/__tests__/demo.test.js b/components/slider/__tests__/demo.test.js
new file mode 100644
index 00000000000..d65961e3664
--- /dev/null
+++ b/components/slider/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('slider');
diff --git a/components/slider/__tests__/demo.test.web.js b/components/slider/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..67a07396597
--- /dev/null
+++ b/components/slider/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('slider');
diff --git a/components/stepper/__tests__/__snapshots__/demo.test.js.snap b/components/stepper/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..38c2d35a0d2
--- /dev/null
+++ b/components/stepper/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,722 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "marginTop": 20,
+    }
+  }
+>
+  <View
+    style={undefined}
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#ddd",
+          "borderTopWidth": 0.5,
+        }
+      }
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                readOnly: true
+              </Text>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "white",
+                      "borderColor": "#d9d9d9",
+                      "borderRadius": 6,
+                      "borderWidth": 1,
+                      "height": 28,
+                      "width": 28,
+                    },
+                    null,
+                    undefined,
+                  ]
+                }
+                testID={undefined}
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#999",
+                        "fontSize": 20,
+                        "textAlign": "center",
+                      },
+                      null,
+                    ]
+                  }
+                >
+                  -
+                </Text>
+              </View>
+              <TextInput
+                autoFocus={undefined}
+                editable={true}
+                keyboardType={undefined}
+                onChange={[Function]}
+                onEndEditing={[Function]}
+                onFocus={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "color": "#222",
+                      "flex": 1,
+                      "fontSize": 16,
+                      "paddingHorizontal": 8,
+                      "textAlign": "center",
+                    },
+                    null,
+                    Object {},
+                  ]
+                }
+                underlineColorAndroid="transparent"
+                value="3"
+              />
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "white",
+                      "borderColor": "#d9d9d9",
+                      "borderRadius": 6,
+                      "borderWidth": 1,
+                      "height": 28,
+                      "width": 28,
+                    },
+                    null,
+                    undefined,
+                  ]
+                }
+                testID={undefined}
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#999",
+                        "fontSize": 20,
+                        "textAlign": "center",
+                      },
+                      null,
+                    ]
+                  }
+                >
+                  +
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                readOnly: false
+              </Text>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "white",
+                      "borderColor": "#d9d9d9",
+                      "borderRadius": 6,
+                      "borderWidth": 1,
+                      "height": 28,
+                      "width": 28,
+                    },
+                    Object {
+                      "backgroundColor": "rgba(239, 239, 239, 0.72)",
+                      "borderColor": "#d9d9d9",
+                    },
+                    undefined,
+                  ]
+                }
+                testID={undefined}
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#999",
+                        "fontSize": 20,
+                        "textAlign": "center",
+                      },
+                      Object {
+                        "color": "#ccc",
+                      },
+                    ]
+                  }
+                >
+                  -
+                </Text>
+              </View>
+              <TextInput
+                autoFocus={undefined}
+                editable={true}
+                keyboardType={undefined}
+                onChange={[Function]}
+                onEndEditing={[Function]}
+                onFocus={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "color": "#222",
+                      "flex": 1,
+                      "fontSize": 16,
+                      "paddingHorizontal": 8,
+                      "textAlign": "center",
+                    },
+                    null,
+                    Object {},
+                  ]
+                }
+                underlineColorAndroid="transparent"
+                value="1"
+              />
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "white",
+                      "borderColor": "#d9d9d9",
+                      "borderRadius": 6,
+                      "borderWidth": 1,
+                      "height": 28,
+                      "width": 28,
+                    },
+                    null,
+                    undefined,
+                  ]
+                }
+                testID={undefined}
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#999",
+                        "fontSize": 20,
+                        "textAlign": "center",
+                      },
+                      null,
+                    ]
+                  }
+                >
+                  +
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            undefined,
+          ]
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#fff",
+                "flexDirection": "row",
+                "flexGrow": 1,
+                "paddingLeft": 15,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "borderBottomColor": "#ddd",
+                  "borderBottomWidth": 0.5,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "minHeight": 45,
+                  "paddingBottom": 6,
+                  "paddingRight": 15,
+                  "paddingTop": 6,
+                },
+                false,
+                false,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "flexDirection": "column",
+                  },
+                ]
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000",
+                      "fontSize": 17,
+                      "lineHeight": 19,
+                      "textAlignVertical": "center",
+                    },
+                  ]
+                }
+              >
+                禁用
+              </Text>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "white",
+                      "borderColor": "#d9d9d9",
+                      "borderRadius": 6,
+                      "borderWidth": 1,
+                      "height": 28,
+                      "width": 28,
+                    },
+                    Object {
+                      "backgroundColor": "rgba(239, 239, 239, 0.72)",
+                      "borderColor": "#d9d9d9",
+                    },
+                    undefined,
+                  ]
+                }
+                testID={undefined}
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#999",
+                        "fontSize": 20,
+                        "textAlign": "center",
+                      },
+                      Object {
+                        "color": "#ccc",
+                      },
+                    ]
+                  }
+                >
+                  -
+                </Text>
+              </View>
+              <TextInput
+                autoFocus={undefined}
+                editable={false}
+                keyboardType={undefined}
+                onChange={[Function]}
+                onEndEditing={[Function]}
+                onFocus={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "color": "#222",
+                      "flex": 1,
+                      "fontSize": 16,
+                      "paddingHorizontal": 8,
+                      "textAlign": "center",
+                    },
+                    Object {
+                      "color": "#ccc",
+                    },
+                    Object {},
+                  ]
+                }
+                underlineColorAndroid="transparent"
+                value="3"
+              />
+              <View
+                accessibilityComponentType={undefined}
+                accessibilityLabel={undefined}
+                accessibilityTraits={undefined}
+                accessible={true}
+                hitSlop={undefined}
+                onLayout={undefined}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "white",
+                      "borderColor": "#d9d9d9",
+                      "borderRadius": 6,
+                      "borderWidth": 1,
+                      "height": 28,
+                      "width": 28,
+                    },
+                    Object {
+                      "backgroundColor": "rgba(239, 239, 239, 0.72)",
+                      "borderColor": "#d9d9d9",
+                    },
+                    undefined,
+                  ]
+                }
+                testID={undefined}
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#999",
+                        "fontSize": 20,
+                        "textAlign": "center",
+                      },
+                      Object {
+                        "color": "#ccc",
+                      },
+                    ]
+                  }
+                >
+                  +
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#fff",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "bottom": 0,
+              "height": 1,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/stepper/__tests__/__snapshots__/demo.test.web.js.snap b/components/stepper/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..d82e8eb3613
--- /dev/null
+++ b/components/stepper/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/stepper/demo/basic.md correctly 1`] = `
+<div
+  class="am-list"
+>
+  <div
+    class="am-list-header"
+  >
+    演示
+  </div>
+  <div
+    class="am-list-body"
+  >
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          显示数值
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          <div
+            class="am-stepper showNumber"
+            style="width:100%;min-width:2rem;"
+          >
+            <div
+              class="am-stepper-handler-wrap"
+            >
+              <span
+                class="am-stepper-handler am-stepper-handler-up "
+                unselectable="unselectable"
+              >
+                <svg
+                  class="am-icon am-icon-[object Object] am-icon-xxs"
+                >
+                  <use
+                    xlink:href="#[object Object]"
+                  />
+                </svg>
+              </span>
+              <span
+                class="am-stepper-handler am-stepper-handler-down "
+                unselectable="unselectable"
+              >
+                <svg
+                  class="am-icon am-icon-[object Object] am-icon-xxs"
+                >
+                  <use
+                    xlink:href="#[object Object]"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="am-stepper-input-wrap"
+            >
+              <input
+                autocomplete="off"
+                class="am-stepper-input"
+                max="10"
+                min="1"
+                value="3"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          禁用
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          <div
+            class="am-stepper showNumber am-stepper-disabled"
+            style="width:100%;min-width:2rem;"
+          >
+            <div
+              class="am-stepper-handler-wrap"
+            >
+              <span
+                class="am-stepper-handler am-stepper-handler-up "
+                unselectable="unselectable"
+              >
+                <svg
+                  class="am-icon am-icon-[object Object] am-icon-xxs"
+                >
+                  <use
+                    xlink:href="#[object Object]"
+                  />
+                </svg>
+              </span>
+              <span
+                class="am-stepper-handler am-stepper-handler-down "
+                unselectable="unselectable"
+              >
+                <svg
+                  class="am-icon am-icon-[object Object] am-icon-xxs"
+                >
+                  <use
+                    xlink:href="#[object Object]"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="am-stepper-input-wrap"
+            >
+              <input
+                autocomplete="off"
+                class="am-stepper-input"
+                disabled=""
+                max="10"
+                min="1"
+                value="3"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/stepper/__tests__/demo.test.js b/components/stepper/__tests__/demo.test.js
new file mode 100644
index 00000000000..74a40f37674
--- /dev/null
+++ b/components/stepper/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('stepper');
diff --git a/components/stepper/__tests__/demo.test.web.js b/components/stepper/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..579c56a399c
--- /dev/null
+++ b/components/stepper/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('stepper');
diff --git a/components/steps/__tests__/__snapshots__/demo.test.js.snap b/components/steps/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..9f34e732190
--- /dev/null
+++ b/components/steps/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,1672 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/steps/demo/basic.tsx correctly 1`] = `
+<ScrollView
+  automaticallyAdjustContentInsets={false}
+  showsHorizontalScrollIndicator={false}
+  showsVerticalScrollIndicator={false}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "marginTop": 60,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 15,
+            "marginRight": 15,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={undefined}
+      >
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 18,
+                    "width": 18,
+                  },
+                  Object {
+                    "borderColor": "#108ee9",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 14,
+                    "width": 14,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 8,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 16,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              已完成
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 12,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 18,
+                    "width": 18,
+                  },
+                  Object {
+                    "borderColor": "#108ee9",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 14,
+                    "width": 14,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#bbb",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 8,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 16,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              进行中
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 12,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 18,
+                    "width": 18,
+                  },
+                  Object {
+                    "borderColor": "#bbb",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 14,
+                    "width": 14,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 8,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 16,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              待运行
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 12,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 15,
+            "marginRight": 15,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={undefined}
+      >
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 18,
+                    "width": 18,
+                  },
+                  Object {
+                    "borderColor": "#108ee9",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 14,
+                    "width": 14,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 8,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 16,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              已完成
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 12,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 18,
+                    "width": 18,
+                  },
+                  Object {
+                    "borderColor": "#108ee9",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 14,
+                    "width": 14,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#f4333c",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 8,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 16,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              进行中
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 12,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 18,
+                    "width": 18,
+                  },
+                  Object {
+                    "borderColor": "#f4333c",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 14,
+                    "width": 14,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#bbb",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#bbb",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 8,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 16,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              待运行
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 12,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 18,
+                    "width": 18,
+                  },
+                  Object {
+                    "borderColor": "#bbb",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 14,
+                    "width": 14,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 8,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 8,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 16,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              再来一个待运行
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 12,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 15,
+            "marginRight": 15,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={undefined}
+      >
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 24,
+                    "width": 24,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                    "borderColor": "#108ee9",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 20,
+                    "width": 20,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 15,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              已完成
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 15,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 24,
+                    "width": 24,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                    "borderColor": "#108ee9",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 20,
+                    "width": 20,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#bbb",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 15,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              进行中
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 15,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 24,
+                    "width": 24,
+                  },
+                  Object {
+                    "backgroundColor": "#bbb",
+                    "borderColor": "#bbb",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 20,
+                    "width": 20,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 15,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              待运行
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 15,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View>
+    <View
+      style={
+        Array [
+          Object {
+            "marginLeft": 15,
+            "marginRight": 15,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={undefined}
+      >
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 24,
+                    "width": 24,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                    "borderColor": "#108ee9",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 20,
+                    "width": 20,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 15,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              已完成
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 15,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 24,
+                    "width": 24,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                    "borderColor": "#108ee9",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 20,
+                    "width": 20,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#108ee9",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#f4333c",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 15,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              进行中
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 15,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 24,
+                    "width": 24,
+                  },
+                  Object {
+                    "backgroundColor": "#f4333c",
+                    "borderColor": "#f4333c",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 20,
+                    "width": 20,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#bbb",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "#bbb",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 15,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              待运行
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 15,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "column",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#fff",
+                    "borderColor": "#108ee9",
+                    "borderRadius": 18,
+                    "borderStyle": "solid",
+                    "borderWidth": 2,
+                    "height": 24,
+                    "width": 24,
+                  },
+                  Object {
+                    "backgroundColor": "#bbb",
+                    "borderColor": "#bbb",
+                  },
+                ]
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "height": 20,
+                    "width": 20,
+                  }
+                }
+              />
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ]
+              }
+            />
+            <View
+              style={
+                Array [
+                  Object {
+                    "height": 30,
+                    "marginLeft": 11,
+                    "width": 2,
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                  },
+                ]
+              }
+            />
+          </View>
+          <View
+            style={
+              Object {
+                "paddingLeft": 15,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "fontWeight": "bold",
+                    "paddingBottom": 9,
+                  },
+                ]
+              }
+            >
+              再来一个待运行
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 15,
+                  },
+                ]
+              }
+            >
+              这里是信息的描述
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</ScrollView>
+`;
diff --git a/components/steps/__tests__/__snapshots__/demo.test.web.js.snap b/components/steps/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..8f6c93a4e1f
--- /dev/null
+++ b/components/steps/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,1412 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/steps/demo/basic.md correctly 1`] = `
+<div
+  class="am-wingblank am-wingblank-lg"
+>
+  <div
+    class="sub-title"
+  >
+    小尺寸
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-steps am-steps-small am-steps-vertical am-steps-hidden"
+  >
+    <div
+      class="am-steps-item am-steps-status-finish am-steps-custom"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-check-circle-o am-icon-md"
+              >
+                <use
+                  xlink:href="#check-circle-o"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            已完成
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-status-process"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              2
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            进行中
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-item-last am-steps-status-wait am-steps-custom ellipsis-item"
+    >
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-ellipsis am-icon-md"
+              >
+                <use
+                  xlink:href="#ellipsis"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            待运行
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="sub-title"
+  >
+    小尺寸, 单行文字流程
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-steps am-steps-small am-steps-vertical am-steps-hidden"
+  >
+    <div
+      class="am-steps-item am-steps-status-finish am-steps-custom"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-check-circle-o am-icon-md"
+              >
+                <use
+                  xlink:href="#check-circle-o"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            已完成
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-status-process"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              2
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            进行中
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-item-last am-steps-status-wait am-steps-custom ellipsis-item"
+    >
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-ellipsis am-icon-md"
+              >
+                <use
+                  xlink:href="#ellipsis"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            待运行
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="sub-title"
+  >
+    正常尺寸
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-steps am-steps-vertical am-steps-hidden"
+  >
+    <div
+      class="am-steps-item am-steps-status-process error-tail"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              1
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            已完成
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-status-error am-steps-custom ellipsis-item"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-cross-circle-o am-icon-md"
+              >
+                <use
+                  xlink:href="#cross-circle-o"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            出错
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-item-last am-steps-status-wait am-steps-custom ellipsis-item"
+    >
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-ellipsis am-icon-md"
+              >
+                <use
+                  xlink:href="#ellipsis"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            待运行
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="sub-title"
+  >
+    自定义 status 
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-steps am-steps-vertical am-steps-hidden"
+  >
+    <div
+      class="am-steps-item am-steps-status-finish am-steps-custom"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤1
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-status-process am-steps-custom error-tail"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤2
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-item-last am-steps-status-error am-steps-custom"
+    >
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤3
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="sub-title"
+  >
+    自定义 icon 
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-steps am-steps-vertical am-steps-hidden"
+  >
+    <div
+      class="am-steps-item am-steps-status-finish am-steps-custom"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤1
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-status-process am-steps-custom"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤2
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-item-last am-steps-status-wait am-steps-custom"
+    >
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤3
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="sub-title"
+  >
+    多 steps 
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-steps am-steps-vertical am-steps-hidden"
+  >
+    <div
+      class="am-steps-item am-steps-status-finish am-steps-custom"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤1
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-status-process am-steps-custom error-tail"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤2
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-status-error am-steps-custom"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤3
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-item-last am-steps-status-wait am-steps-custom"
+    >
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤4
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/steps/demo/horizontal.md correctly 1`] = `
+<div
+  class="am-wingblank am-wingblank-lg stepsExample"
+>
+  <div
+    class="sub-title"
+  >
+    水平小尺寸
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-steps am-steps-small am-steps-horizontal am-steps-label-vertical am-steps-hidden"
+  >
+    <div
+      class="am-steps-item am-steps-status-finish am-steps-custom"
+      style="margin-right:-1px;"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-check-circle-o am-icon-md"
+              >
+                <use
+                  xlink:href="#check-circle-o"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            已完成
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-status-process"
+      style="margin-right:-1px;"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              2
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            进行中
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-item-last am-steps-status-wait am-steps-custom ellipsis-item"
+    >
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-ellipsis am-icon-md"
+              >
+                <use
+                  xlink:href="#ellipsis"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            待运行
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="sub-title"
+  >
+    水平正常尺寸
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-steps am-steps-horizontal am-steps-label-vertical am-steps-hidden"
+  >
+    <div
+      class="am-steps-item am-steps-status-finish am-steps-custom"
+      style="margin-right:-1px;"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-check-circle-o am-icon-md"
+              >
+                <use
+                  xlink:href="#check-circle-o"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            已完成
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-status-process"
+      style="margin-right:-1px;"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              2
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            进行中
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-item-last am-steps-status-wait am-steps-custom ellipsis-item"
+    >
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-ellipsis am-icon-md"
+              >
+                <use
+                  xlink:href="#ellipsis"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            待运行
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            这里是信息的描述
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="sub-title"
+  >
+    水平自定义icon
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-steps am-steps-horizontal am-steps-label-vertical am-steps-hidden"
+  >
+    <div
+      class="am-steps-item am-steps-status-process am-steps-custom error-tail"
+      style="margin-right:-1px;"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤1
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-status-error am-steps-custom"
+      style="margin-right:-1px;"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤2
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-item-last am-steps-status-wait am-steps-custom"
+    >
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <svg
+                class="am-icon am-icon-[object Object] am-icon-md"
+              >
+                <use
+                  xlink:href="#[object Object]"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            步骤3
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="sub-title"
+  >
+    水平 timeline 模式
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-steps am-steps-small am-steps-horizontal am-steps-label-vertical am-steps-hidden timeline"
+  >
+    <div
+      class="am-steps-item am-steps-status-wait am-steps-custom"
+      style="margin-right:-1px;"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <span
+                class="fake-icon"
+              />
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            现在
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            立即买入
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-status-wait am-steps-custom"
+      style="margin-right:-1px;"
+    >
+      <div
+        class="am-steps-tail"
+      >
+        <i />
+      </div>
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <span
+                class="fake-icon"
+              />
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            11月3日
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            买入成功
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-steps-item am-steps-item-last am-steps-status-wait am-steps-custom"
+    >
+      <div
+        class="am-steps-step"
+      >
+        <div
+          class="am-steps-head"
+        >
+          <div
+            class="am-steps-head-inner"
+          >
+            <span
+              class="am-steps-icon"
+            >
+              <span
+                class="fake-icon"
+              />
+            </span>
+          </div>
+        </div>
+        <div
+          class="am-steps-main"
+        >
+          <div
+            class="am-steps-title"
+          >
+            11月4日
+          </div>
+          <div
+            class="am-steps-description"
+          >
+            收益到账
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/steps/__tests__/demo.test.js b/components/steps/__tests__/demo.test.js
new file mode 100644
index 00000000000..9a5fe8d137f
--- /dev/null
+++ b/components/steps/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('steps');
diff --git a/components/steps/__tests__/demo.test.web.js b/components/steps/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..0bb5f9260f4
--- /dev/null
+++ b/components/steps/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('steps');
diff --git a/components/swipe-action/__tests__/__snapshots__/demo.test.js.snap b/components/swipe-action/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..75596a8f8ed
--- /dev/null
+++ b/components/swipe-action/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,200 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/swipe-action/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "paddingTop": 30,
+    }
+  }
+>
+  <View
+    style={undefined}
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#ddd",
+          "borderTopWidth": 0.5,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#dbddde",
+              "overflow": "hidden",
+            },
+            Object {
+              "backgroundColor": "transparent",
+            },
+          ]
+        }
+      >
+        <View
+          onLayout={[Function]}
+          onMoveShouldSetResponder={[Function]}
+          onMoveShouldSetResponderCapture={[Function]}
+          onResponderEnd={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderReject={[Function]}
+          onResponderRelease={[Function]}
+          onResponderStart={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          onStartShouldSetResponderCapture={[Function]}
+          style={
+            Array [
+              Object {},
+              Object {
+                "left": 0,
+              },
+            ]
+          }
+        >
+          <View
+            accessibilityComponentType={undefined}
+            accessibilityLabel={undefined}
+            accessibilityTraits={undefined}
+            accessible={true}
+            hitSlop={undefined}
+            onLayout={undefined}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                },
+                undefined,
+              ]
+            }
+            testID={undefined}
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "#fff",
+                    "flexDirection": "row",
+                    "flexGrow": 1,
+                    "paddingLeft": 15,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "borderBottomColor": "#ddd",
+                      "borderBottomWidth": 0.5,
+                      "flex": 1,
+                      "flexDirection": "row",
+                      "minHeight": 45,
+                      "paddingBottom": 6,
+                      "paddingRight": 15,
+                      "paddingTop": 6,
+                    },
+                    false,
+                    false,
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    accessible={true}
+                    allowFontScaling={true}
+                    ellipsizeMode="tail"
+                    numberOfLines={1}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#000",
+                          "fontSize": 17,
+                          "lineHeight": 19,
+                          "textAlignVertical": "center",
+                        },
+                      ]
+                    }
+                  >
+                    简单例子 - 左右都可操作
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column",
+                      },
+                    ]
+                  }
+                >
+                  <Text
+                    accessible={true}
+                    allowFontScaling={true}
+                    ellipsizeMode="tail"
+                    numberOfLines={1}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#888",
+                          "fontSize": 17,
+                          "lineHeight": 19,
+                          "textAlign": "right",
+                          "textAlignVertical": "center",
+                        },
+                      ]
+                    }
+                  >
+                    额外参数
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View />
+        <View />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#fff",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "bottom": 0,
+              "height": 1,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/swipe-action/__tests__/__snapshots__/demo.test.web.js.snap b/components/swipe-action/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..c59fb0b9a2d
--- /dev/null
+++ b/components/swipe-action/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,180 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/swipe-action/demo/basic.md correctly 1`] = `
+<div
+  class="am-list"
+>
+  <div
+    class="am-list-body"
+  >
+    <div
+      class="am-swipe"
+    >
+      <div
+        class="am-swipe"
+      >
+        <div
+          class="am-swipe-cover"
+        />
+        <div
+          class="am-swipe-actions am-swipe-actions-left"
+        >
+          <div
+            class="am-swipe-btn"
+            style="background-color:#108ee9;color:white;"
+          >
+            <div
+              class="am-swipe-text"
+            >
+              回复
+            </div>
+          </div>
+          <div
+            class="am-swipe-btn"
+            style="background-color:#ddd;color:white;"
+          >
+            <div
+              class="am-swipe-text"
+            >
+              取消
+            </div>
+          </div>
+        </div>
+        <div
+          class="am-swipe-actions am-swipe-actions-right"
+        >
+          <div
+            class="am-swipe-btn"
+            style="background-color:#ddd;color:white;"
+          >
+            <div
+              class="am-swipe-text"
+            >
+              取消
+            </div>
+          </div>
+          <div
+            class="am-swipe-btn"
+            style="background-color:#F4333C;color:white;"
+          >
+            <div
+              class="am-swipe-text"
+            >
+              删除
+            </div>
+          </div>
+        </div>
+        <div
+          class="am-swipe-content"
+        >
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                左右都可操作
+              </div>
+              <div
+                class="am-list-extra"
+              >
+                更多
+              </div>
+              <div
+                class="am-list-arrow am-list-arrow-horizontal"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-swipe"
+    >
+      <div
+        class="am-swipe"
+      >
+        <div
+          class="am-swipe-cover"
+        />
+        <div
+          class="am-swipe-actions am-swipe-actions-left"
+        >
+          <div
+            class="am-swipe-btn"
+            style="background-color:#108ee9;color:white;"
+          >
+            <div
+              class="am-swipe-text"
+            >
+              回复
+            </div>
+          </div>
+          <div
+            class="am-swipe-btn"
+            style="background-color:#ddd;color:white;"
+          >
+            <div
+              class="am-swipe-text"
+            >
+              取消
+            </div>
+          </div>
+        </div>
+        <div
+          class="am-swipe-actions am-swipe-actions-right"
+        >
+          <div
+            class="am-swipe-btn"
+            style="background-color:#ddd;color:white;"
+          >
+            <div
+              class="am-swipe-text"
+            >
+              取消
+            </div>
+          </div>
+          <div
+            class="am-swipe-btn"
+            style="background-color:#F4333C;color:white;"
+          >
+            <div
+              class="am-swipe-text"
+            >
+              删除
+            </div>
+          </div>
+        </div>
+        <div
+          class="am-swipe-content"
+        >
+          <div
+            class="am-list-item am-list-item-middle"
+          >
+            <div
+              class="am-list-line"
+            >
+              <div
+                class="am-list-content"
+              >
+                左右都可操作
+              </div>
+              <div
+                class="am-list-extra"
+              >
+                更多
+              </div>
+              <div
+                class="am-list-arrow am-list-arrow-horizontal"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/swipe-action/__tests__/demo.test.js b/components/swipe-action/__tests__/demo.test.js
new file mode 100644
index 00000000000..46f7daf9331
--- /dev/null
+++ b/components/swipe-action/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('swipe-action');
diff --git a/components/swipe-action/__tests__/demo.test.web.js b/components/swipe-action/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..6d6cf6a2f9c
--- /dev/null
+++ b/components/swipe-action/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('swipe-action');
diff --git a/components/switch/__tests__/__snapshots__/demo.test.js.snap b/components/switch/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..f6a1c218589
--- /dev/null
+++ b/components/switch/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,476 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "marginTop": 20,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#fff",
+        "borderTopColor": "#ddd",
+        "borderTopWidth": 0.5,
+      }
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#fff",
+              "flexDirection": "row",
+              "flexGrow": 1,
+              "paddingLeft": 15,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "borderBottomColor": "#ddd",
+                "borderBottomWidth": 0.5,
+                "flex": 1,
+                "flexDirection": "row",
+                "minHeight": 45,
+                "paddingBottom": 6,
+                "paddingRight": 15,
+                "paddingTop": 6,
+              },
+              false,
+              false,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "flexDirection": "column",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "lineHeight": 19,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              默认开(受控)
+            </Text>
+          </View>
+          <RCTSwitch
+            disabled={false}
+            onChange={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            onValueChange={[Function]}
+            style={
+              Array [
+                Object {
+                  "height": 31,
+                  "width": 51,
+                },
+                undefined,
+              ]
+            }
+            value={true}
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#fff",
+              "flexDirection": "row",
+              "flexGrow": 1,
+              "paddingLeft": 15,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "borderBottomColor": "#ddd",
+                "borderBottomWidth": 0.5,
+                "flex": 1,
+                "flexDirection": "row",
+                "minHeight": 45,
+                "paddingBottom": 6,
+                "paddingRight": 15,
+                "paddingTop": 6,
+              },
+              false,
+              false,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "flexDirection": "column",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "lineHeight": 19,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              默认关(受控)
+            </Text>
+          </View>
+          <RCTSwitch
+            disabled={false}
+            onChange={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            onValueChange={[Function]}
+            style={
+              Array [
+                Object {
+                  "height": 31,
+                  "width": 51,
+                },
+                undefined,
+              ]
+            }
+            value={false}
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#fff",
+              "flexDirection": "row",
+              "flexGrow": 1,
+              "paddingLeft": 15,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "borderBottomColor": "#ddd",
+                "borderBottomWidth": 0.5,
+                "flex": 1,
+                "flexDirection": "row",
+                "minHeight": 45,
+                "paddingBottom": 6,
+                "paddingRight": 15,
+                "paddingTop": 6,
+              },
+              false,
+              false,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "flexDirection": "column",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "lineHeight": 19,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              onChange 事件，开关状态：
+            </Text>
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "lineHeight": 19,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              close
+            </Text>
+          </View>
+          <RCTSwitch
+            disabled={false}
+            onChange={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            onValueChange={[Function]}
+            style={
+              Array [
+                Object {
+                  "height": 31,
+                  "width": 51,
+                },
+                undefined,
+              ]
+            }
+            value={false}
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
+      }
+      testID={undefined}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#fff",
+              "flexDirection": "row",
+              "flexGrow": 1,
+              "paddingLeft": 15,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "borderBottomColor": "#ddd",
+                "borderBottomWidth": 0.5,
+                "flex": 1,
+                "flexDirection": "row",
+                "minHeight": 45,
+                "paddingBottom": 6,
+                "paddingRight": 15,
+                "paddingTop": 6,
+              },
+              false,
+              false,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "flexDirection": "column",
+                },
+              ]
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "color": "#000",
+                    "fontSize": 17,
+                    "lineHeight": 19,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              默认关不可修改
+            </Text>
+          </View>
+          <RCTSwitch
+            disabled={true}
+            onChange={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            onValueChange={[Function]}
+            style={
+              Array [
+                Object {
+                  "height": 31,
+                  "width": 51,
+                },
+                undefined,
+              ]
+            }
+            value={false}
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#fff",
+            "borderBottomColor": "#ddd",
+            "borderBottomWidth": 0.5,
+            "bottom": 0,
+            "height": 1,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+          },
+        ]
+      }
+    />
+  </View>
+</View>
+`;
diff --git a/components/switch/__tests__/__snapshots__/demo.test.web.js.snap b/components/switch/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..c6c5be959d4
--- /dev/null
+++ b/components/switch/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
+<div
+  class="am-list"
+>
+  <div
+    class="am-list-header"
+  >
+    表单开关项
+  </div>
+  <div
+    class="am-list-body"
+  >
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          默认开
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          <label
+            class="am-switch"
+          >
+            <input
+              checked=""
+              class="am-switch-checkbox"
+              name=""
+              type="checkbox"
+            />
+            <div
+              class="checkbox"
+            />
+          </label>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          默认关
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          <label
+            class="am-switch"
+          >
+            <input
+              class="am-switch-checkbox"
+              name=""
+              type="checkbox"
+            />
+            <div
+              class="checkbox"
+            />
+          </label>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          默认关不可修改
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          <label
+            class="am-switch"
+          >
+            <input
+              class="am-switch-checkbox"
+              disabled=""
+              name=""
+              type="checkbox"
+            />
+            <div
+              class="checkbox"
+            />
+          </label>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-list-item am-list-item-middle"
+    >
+      <div
+        class="am-list-line"
+      >
+        <div
+          class="am-list-content"
+        >
+          默认开不可修改
+        </div>
+        <div
+          class="am-list-extra"
+        >
+          <label
+            class="am-switch"
+          >
+            <input
+              checked=""
+              class="am-switch-checkbox"
+              disabled=""
+              name=""
+              type="checkbox"
+            />
+            <div
+              class="checkbox"
+            />
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/switch/__tests__/demo.test.js b/components/switch/__tests__/demo.test.js
new file mode 100644
index 00000000000..9507facb682
--- /dev/null
+++ b/components/switch/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('switch');
diff --git a/components/switch/__tests__/demo.test.web.js b/components/switch/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..537b06dc3aa
--- /dev/null
+++ b/components/switch/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('switch');
diff --git a/components/tab-bar/__tests__/__snapshots__/demo.test.js.snap b/components/tab-bar/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..6bb04bf4524
--- /dev/null
+++ b/components/tab-bar/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tab-bar/demo/basic.tsx correctly 1`] = `
+<RCTTabBar
+  barTintColor="#ccc"
+  itemPositioning={undefined}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+  tintColor="#33A3F4"
+  translucent={true}
+  unselectedTintColor="#949494"
+>
+  <RCTTabBarItem
+    icon={1}
+    onPress={[Function]}
+    selected={false}
+    selectedIcon={1}
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+    title="生活"
+  >
+    <View />
+  </RCTTabBarItem>
+  <RCTTabBarItem
+    badge={2}
+    icon={1}
+    onPress={[Function]}
+    selected={true}
+    selectedIcon={1}
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+    title="口碑"
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "white",
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "margin": 50,
+          }
+        }
+      >
+        口碑 Tab
+      </Text>
+    </View>
+  </RCTTabBarItem>
+  <RCTTabBarItem
+    icon={1}
+    onPress={[Function]}
+    selected={false}
+    selectedIcon={1}
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+    title="朋友"
+  >
+    <View />
+  </RCTTabBarItem>
+  <RCTTabBarItem
+    icon={1}
+    onPress={[Function]}
+    selected={false}
+    selectedIcon={1}
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+    title="我的"
+  >
+    <View />
+  </RCTTabBarItem>
+</RCTTabBar>
+`;
diff --git a/components/tab-bar/__tests__/__snapshots__/demo.test.web.js.snap b/components/tab-bar/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..010b7cdb97d
--- /dev/null
+++ b/components/tab-bar/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tab-bar/demo/basic.md correctly 1`] = `
+<div
+  class="am-tab-bar am-tab-bar-bottom"
+>
+  <div
+    class="am-tab-bar-content am-tab-bar-content-no-animated"
+  >
+    <div
+      aria-hidden="true"
+      class="am-tab-bar-tabpane am-tab-bar-tabpane-inactive"
+      role="tabpanel"
+    >
+      正在加载
+    </div>
+    <div
+      aria-hidden="false"
+      class="am-tab-bar-tabpane am-tab-bar-tabpane-active"
+      role="tabpanel"
+    >
+      <div
+        style="background-color:white;height:100%;text-align:center;"
+      >
+        <div
+          style="padding-top:60px;"
+        >
+          你已点击“口碑” tab， 当前展示“口碑”信息
+        </div>
+        <a
+          style="display:block;margin-top:40px;margin-bottom:600px;color:#108ee9;"
+        >
+          点击切换 tab-bar 显示/隐藏
+        </a>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="am-tab-bar-tabpane am-tab-bar-tabpane-inactive"
+      role="tabpanel"
+    >
+      正在加载
+    </div>
+    <div
+      aria-hidden="true"
+      class="am-tab-bar-tabpane am-tab-bar-tabpane-inactive"
+      role="tabpanel"
+    >
+      正在加载
+    </div>
+  </div>
+  <div
+    class="am-tab-bar-bar"
+    role="tablist"
+    style="background-color:white;"
+    tabindex="0"
+  >
+    <div
+      aria-disabled="false"
+      aria-selected="false"
+      class=" am-tab-bar-tab"
+      role="tab"
+    >
+      <div
+        data-seed="logId"
+      >
+        <div
+          class="am-tab-bar-tab-icon"
+          style="color:#949494;"
+        >
+          <span
+            class="am-tab-bar-tab-badge tab-badge am-badge"
+            title="1"
+          >
+             
+            <div
+              style="width:0.44rem;height:0.44rem;background:url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  0.42rem 0.42rem no-repeat;"
+            />
+             
+            <sup
+              class="am-badge-text"
+            >
+               1 
+            </sup>
+          </span>
+        </div>
+        <p
+          class="am-tab-bar-tab-title"
+          style="color:#949494;"
+        >
+          生活
+        </p>
+      </div>
+    </div>
+    <div
+      aria-disabled="false"
+      aria-selected="true"
+      class="am-tab-bar-tab-active am-tab-bar-tab"
+      role="tab"
+    >
+      <div
+        data-seed="logId1"
+      >
+        <div
+          class="am-tab-bar-tab-icon"
+          style="color:#33A3F4;"
+        >
+          <span
+            class="am-tab-bar-tab-badge tab-badge am-badge"
+            title="new"
+          >
+             
+            <svg
+              class="am-icon am-icon-koubei am-icon-md"
+            >
+              <use
+                xlink:href="#koubei"
+              />
+            </svg>
+             
+            <sup
+              class="am-badge-text"
+            >
+               new 
+            </sup>
+          </span>
+        </div>
+        <p
+          class="am-tab-bar-tab-title"
+          style="color:#33A3F4;"
+        >
+          口碑
+        </p>
+      </div>
+    </div>
+    <div
+      aria-disabled="false"
+      aria-selected="false"
+      class=" am-tab-bar-tab"
+      role="tab"
+    >
+      <div>
+        <div
+          class="am-tab-bar-tab-icon"
+          style="color:#949494;"
+        >
+          <span
+            class="am-tab-bar-tab-badge tab-dot am-badge"
+            title=""
+          >
+            <div
+              style="width:0.44rem;height:0.44rem;background:url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  0.42rem 0.42rem no-repeat;"
+            />
+            <sup
+              class="am-badge-dot"
+            >
+                
+            </sup>
+          </span>
+        </div>
+        <p
+          class="am-tab-bar-tab-title"
+          style="color:#949494;"
+        >
+          朋友
+        </p>
+      </div>
+    </div>
+    <div
+      aria-disabled="false"
+      aria-selected="false"
+      class=" am-tab-bar-tab"
+      role="tab"
+    >
+      <div>
+        <div
+          class="am-tab-bar-tab-icon"
+          style="color:#949494;"
+        >
+          <img
+            alt="我的"
+            class="am-tab-bar-tab-image"
+            src="https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg"
+          />
+        </div>
+        <p
+          class="am-tab-bar-tab-title"
+          style="color:#949494;"
+        >
+          我的
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/tab-bar/__tests__/demo.test.js b/components/tab-bar/__tests__/demo.test.js
new file mode 100644
index 00000000000..039f920acd4
--- /dev/null
+++ b/components/tab-bar/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('tab-bar');
diff --git a/components/tab-bar/__tests__/demo.test.web.js b/components/tab-bar/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..00709a9592f
--- /dev/null
+++ b/components/tab-bar/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('tab-bar');
diff --git a/components/table/__tests__/__snapshots__/demo.test.web.js.snap b/components/table/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..743bb99134b
--- /dev/null
+++ b/components/table/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,362 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/table/demo/basic.md correctly 1`] = `
+<div
+  style="padding:20px;"
+>
+  <div
+    class="am-table am-table-scroll-position-left"
+  >
+    <div
+      class="am-table-content"
+    >
+      <div
+        class="am-table-scroll"
+      >
+        <div
+          class="am-table-body"
+          style="overflow-x:auto;"
+        >
+          <table
+            class="am-table-fixed"
+            style="table-layout:fixed;"
+          >
+            <colgroup>
+              <col
+                style="width:1rem;min-width:1rem;"
+              />
+              <col
+                style="width:1rem;min-width:1rem;"
+              />
+              <col
+                style="width:1rem;min-width:1rem;"
+              />
+              <col
+                style="width:1rem;min-width:1rem;"
+              />
+              <col
+                style="width:1rem;min-width:1rem;"
+              />
+              <col
+                style="width:1rem;min-width:1rem;"
+              />
+              <col
+                style="width:1rem;min-width:1rem;"
+              />
+              <col
+                style="width:1rem;min-width:1rem;"
+              />
+              <col
+                style="width:1rem;min-width:1rem;"
+              />
+              <col
+                style="width:1rem;min-width:1rem;"
+              />
+              <col
+                style="width:1rem;min-width:1rem;"
+              />
+            </colgroup>
+            <tbody
+              class="am-table-tbody"
+            >
+              <tr
+                class="am-table-row  am-table-row-level-0"
+              >
+                <td
+                  class=""
+                >
+                  <span
+                    class="am-table-row-indent indent-level-0"
+                    style="padding-left:0px;"
+                  />
+                  人物1
+                </td>
+                <td
+                  class=""
+                >
+                  二哈
+                </td>
+                <td
+                  class=""
+                >
+                  32
+                </td>
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                >
+                  32
+                </td>
+                <td
+                  class=""
+                >
+                  32
+                </td>
+                <td
+                  class=""
+                >
+                  32
+                </td>
+                <td
+                  class=""
+                >
+                  32
+                </td>
+                <td
+                  class=""
+                >
+                  32
+                </td>
+                <td
+                  class=""
+                >
+                  32
+                </td>
+                <td
+                  class=""
+                >
+                  32
+                </td>
+              </tr>
+              <tr
+                class="am-table-row  am-table-row-level-0"
+              >
+                <td
+                  class=""
+                >
+                  <span
+                    class="am-table-row-indent indent-level-0"
+                    style="padding-left:0px;"
+                  />
+                  人物2
+                </td>
+                <td
+                  class=""
+                >
+                  小明
+                </td>
+                <td
+                  class=""
+                >
+                  98
+                </td>
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                >
+                  98
+                </td>
+                <td
+                  class=""
+                >
+                  98
+                </td>
+                <td
+                  class=""
+                >
+                  98
+                </td>
+                <td
+                  class=""
+                >
+                  98
+                </td>
+                <td
+                  class=""
+                >
+                  98
+                </td>
+                <td
+                  class=""
+                >
+                  98
+                </td>
+                <td
+                  class=""
+                >
+                  98
+                </td>
+              </tr>
+              <tr
+                class="am-table-row  am-table-row-level-0"
+              >
+                <td
+                  class=""
+                >
+                  <span
+                    class="am-table-row-indent indent-level-0"
+                    style="padding-left:0px;"
+                  />
+                  人物3
+                </td>
+                <td
+                  class=""
+                >
+                  猪头
+                </td>
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                >
+                  16
+                </td>
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                />
+              </tr>
+              <tr
+                class="am-table-row  am-table-row-level-0"
+              >
+                <td
+                  class=""
+                >
+                  <span
+                    class="am-table-row-indent indent-level-0"
+                    style="padding-left:0px;"
+                  />
+                  人物4
+                </td>
+                <td
+                  class=""
+                >
+                  小二
+                </td>
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                >
+                  33
+                </td>
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                />
+                <td
+                  class=""
+                />
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div
+        class="am-table-fixed-left"
+      >
+        <div
+          class="am-table-body-outer"
+        >
+          <div
+            class="am-table-body-inner"
+          >
+            <table
+              class="am-table-fixed"
+            >
+              <colgroup>
+                <col
+                  style="width:1rem;min-width:1rem;"
+                />
+              </colgroup>
+              <tbody
+                class="am-table-tbody"
+              >
+                <tr
+                  class="am-table-row  am-table-row-level-0"
+                >
+                  <td
+                    class=""
+                  >
+                    <span
+                      class="am-table-row-indent indent-level-0"
+                      style="padding-left:0px;"
+                    />
+                    人物1
+                  </td>
+                </tr>
+                <tr
+                  class="am-table-row  am-table-row-level-0"
+                >
+                  <td
+                    class=""
+                  >
+                    <span
+                      class="am-table-row-indent indent-level-0"
+                      style="padding-left:0px;"
+                    />
+                    人物2
+                  </td>
+                </tr>
+                <tr
+                  class="am-table-row  am-table-row-level-0"
+                >
+                  <td
+                    class=""
+                  >
+                    <span
+                      class="am-table-row-indent indent-level-0"
+                      style="padding-left:0px;"
+                    />
+                    人物3
+                  </td>
+                </tr>
+                <tr
+                  class="am-table-row  am-table-row-level-0"
+                >
+                  <td
+                    class=""
+                  >
+                    <span
+                      class="am-table-row-indent indent-level-0"
+                      style="padding-left:0px;"
+                    />
+                    人物4
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/table/__tests__/demo.test.web.js b/components/table/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..98f74882d62
--- /dev/null
+++ b/components/table/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('table');
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..e5dca5eb3d8
--- /dev/null
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,318 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tabs/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+      "paddingTop": 20,
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#ccc",
+            "borderLeftWidth": 0,
+            "borderRightWidth": 0,
+            "borderTopWidth": 0,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "height": 50,
+            "justifyContent": "space-around",
+          },
+          Object {
+            "backgroundColor": null,
+          },
+          Array [
+            Object {
+              "borderBottomWidth": 1,
+              "borderTopWidth": 0,
+              "height": 42,
+            },
+            Object {
+              "borderColor": "#ddd",
+            },
+            null,
+          ],
+        ]
+      }
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel="选项卡一"
+        accessibilityTraits="button"
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "flex": 1,
+            "opacity": 1,
+          }
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+                "justifyContent": "center",
+                "paddingBottom": 10,
+              },
+              Array [
+                Object {
+                  "paddingBottom": 0,
+                },
+              ],
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#108ee9",
+                  "fontWeight": "bold",
+                },
+                Array [
+                  Object {
+                    "fontSize": 15,
+                  },
+                ],
+              ]
+            }
+          >
+            选项卡一
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel="选项卡二"
+        accessibilityTraits="button"
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "flex": 1,
+            "opacity": 1,
+          }
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+                "justifyContent": "center",
+                "paddingBottom": 10,
+              },
+              Array [
+                Object {
+                  "paddingBottom": 0,
+                },
+              ],
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#000",
+                  "fontWeight": "normal",
+                },
+                Array [
+                  Object {
+                    "fontSize": 15,
+                  },
+                ],
+              ]
+            }
+          >
+            选项卡二
+          </Text>
+        </View>
+      </View>
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel="选项卡三"
+        accessibilityTraits="button"
+        accessible={true}
+        hitSlop={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "flex": 1,
+            "opacity": 1,
+          }
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+                "justifyContent": "center",
+                "paddingBottom": 10,
+              },
+              Array [
+                Object {
+                  "paddingBottom": 0,
+                },
+              ],
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Array [
+                Object {
+                  "color": "#000",
+                  "fontWeight": "normal",
+                },
+                Array [
+                  Object {
+                    "fontSize": 15,
+                  },
+                ],
+              ]
+            }
+          >
+            选项卡三
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          Object {
+            "backgroundColor": "#108ee9",
+            "bottom": -1,
+            "height": 2,
+            "left": 0,
+            "position": "absolute",
+            "width": 250,
+          }
+        }
+      />
+    </View>
+    <ScrollView
+      alwaysBounceVertical={false}
+      automaticallyAdjustContentInsets={false}
+      contentOffset={
+        Object {
+          "x": 0,
+        }
+      }
+      directionalLockEnabled={true}
+      horizontal={true}
+      keyboardDismissMode="on-drag"
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      pagingEnabled={true}
+      scrollEnabled={false}
+      scrollEventThrottle={16}
+      scrollsToTop={false}
+      showsHorizontalScrollIndicator={false}
+    >
+      <View
+        style={
+          Object {
+            "width": 750,
+          }
+        }
+      >
+        <View>
+          <View
+            style={
+              Object {
+                "alignItems": "center",
+                "height": 100,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+            >
+              选项卡一内容
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Object {
+            "width": 750,
+          }
+        }
+      >
+        <View
+          tabLabel="选项卡二"
+        />
+      </View>
+      <View
+        style={
+          Object {
+            "width": 750,
+          }
+        }
+      >
+        <View
+          tabLabel="选项卡三"
+        />
+      </View>
+    </ScrollView>
+  </View>
+</View>
+`;
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.web.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..b9b46c5283a
--- /dev/null
+++ b/components/tabs/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,361 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-tabs am-tabs-top"
+  >
+    <div
+      class="am-tabs-bar"
+      role="tablist"
+      tabindex="0"
+    >
+      <div
+        class="am-tabs-ink-bar am-tabs-ink-bar-animated"
+      />
+      <div
+        aria-disabled="false"
+        aria-selected="false"
+        class=" am-tabs-tab"
+        role="tab"
+      >
+        选项卡一
+      </div>
+      <div
+        aria-disabled="false"
+        aria-selected="true"
+        class="am-tabs-tab-active am-tabs-tab"
+        role="tab"
+      >
+        选项卡二
+      </div>
+      <div
+        aria-disabled="false"
+        aria-selected="false"
+        class=" am-tabs-tab"
+        role="tab"
+      >
+        选项卡三
+      </div>
+    </div>
+    <div
+      class="am-tabs-content am-tabs-content-animated"
+      style="transform:translateX(-100%) translateZ(0);-webkit-transform:translateX(-100%) translateZ(0);-moz-transform:translateX(-100%) translateZ(0);"
+    >
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="false"
+        class="am-tabs-tabpane am-tabs-tabpane-active"
+        role="tabpanel"
+      >
+        <div
+          style="display:flex;align-items:center;justify-content:center;height:5rem;background-color:#fff;"
+        >
+          选项卡二内容
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/mutlitabs.md correctly 1`] = `
+<div>
+  <div
+    class="am-tabs am-tabs-top"
+  >
+    <div
+      class="am-tabs-bar"
+      role="tablist"
+      tabindex="0"
+    >
+      <div
+        class="am-tabs-nav-container am-tabs-nav-swipe-container am-tabs-prevpage am-tabs-nextpage"
+      >
+        <div
+          class="am-tabs-nav-wrap"
+        >
+          <div
+            class="am-tabs-nav-swipe"
+          >
+            <div
+              class="am-tabs-nav"
+            >
+              <div
+                class="am-tabs-ink-bar am-tabs-ink-bar-animated"
+              />
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" am-tabs-tab"
+                role="tab"
+                style="display:flex;flex:0 0 20%;"
+              >
+                选项0
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" am-tabs-tab"
+                role="tab"
+                style="display:flex;flex:0 0 20%;"
+              >
+                选项1
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" am-tabs-tab"
+                role="tab"
+                style="display:flex;flex:0 0 20%;"
+              >
+                选项2
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" am-tabs-tab"
+                role="tab"
+                style="display:flex;flex:0 0 20%;"
+              >
+                选项3
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" am-tabs-tab"
+                role="tab"
+                style="display:flex;flex:0 0 20%;"
+              >
+                选项4
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" am-tabs-tab"
+                role="tab"
+                style="display:flex;flex:0 0 20%;"
+              >
+                选项5
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" am-tabs-tab"
+                role="tab"
+                style="display:flex;flex:0 0 20%;"
+              >
+                选项6
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" am-tabs-tab"
+                role="tab"
+                style="display:flex;flex:0 0 20%;"
+              >
+                选项7
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="true"
+                class="am-tabs-tab-active am-tabs-tab"
+                role="tab"
+                style="display:flex;flex:0 0 20%;"
+              >
+                选项8
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" am-tabs-tab"
+                role="tab"
+                style="display:flex;flex:0 0 20%;"
+              >
+                选项9
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" am-tabs-tab"
+                role="tab"
+                style="display:flex;flex:0 0 20%;"
+              >
+                选项10
+              </div>
+              <div
+                aria-disabled="false"
+                aria-selected="false"
+                class=" am-tabs-tab"
+                role="tab"
+                style="display:flex;flex:0 0 20%;"
+              >
+                选项11
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="am-tabs-content am-tabs-content-animated"
+      style="transform:translateX(-800%) translateZ(0);-webkit-transform:translateX(-800%) translateZ(0);-moz-transform:translateX(-800%) translateZ(0);"
+    >
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="false"
+        class="am-tabs-tabpane am-tabs-tabpane-active"
+        role="tabpanel"
+      >
+        <div
+          style="display:flex;align-items:center;justify-content:center;height:5rem;background-color:#fff;"
+        >
+          选项8内容
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/noanim.md correctly 1`] = `
+<div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-tabs am-tabs-top"
+  >
+    <div
+      class="am-tabs-bar"
+      role="tablist"
+      tabindex="0"
+    >
+      <div
+        class="am-tabs-ink-bar am-tabs-ink-bar-no-animated"
+      />
+      <div
+        aria-disabled="false"
+        aria-selected="false"
+        class=" am-tabs-tab"
+        role="tab"
+      >
+        选项卡一
+      </div>
+      <div
+        aria-disabled="false"
+        aria-selected="false"
+        class=" am-tabs-tab"
+        role="tab"
+      >
+        选项卡二
+      </div>
+      <div
+        aria-disabled="false"
+        aria-selected="true"
+        class="am-tabs-tab-active am-tabs-tab"
+        role="tab"
+      >
+        选项卡三
+      </div>
+    </div>
+    <div
+      class="am-tabs-content am-tabs-content-no-animated"
+    >
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="am-tabs-tabpane am-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="false"
+        class="am-tabs-tabpane am-tabs-tabpane-active"
+        role="tabpanel"
+      >
+        <div
+          style="display:flex;align-items:center;justify-content:center;height:5rem;background-color:#fff;"
+        >
+          选项卡三内容
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+</div>
+`;
diff --git a/components/tabs/__tests__/demo.test.js b/components/tabs/__tests__/demo.test.js
new file mode 100644
index 00000000000..3d7e98ab37c
--- /dev/null
+++ b/components/tabs/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('tabs');
diff --git a/components/tabs/__tests__/demo.test.web.js b/components/tabs/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..bdc039747a3
--- /dev/null
+++ b/components/tabs/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('tabs');
diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..758513dbac0
--- /dev/null
+++ b/components/tag/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,519 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tag/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Object {
+      "padding": 10,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderRadius": 3,
+          "flexDirection": "row",
+          "overflow": "visible",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "borderRadius": 3,
+            "borderStyle": "solid",
+            "borderWidth": 0.5,
+            "overflow": "hidden",
+            "paddingHorizontal": 15,
+            "paddingVertical": 6,
+          },
+          Object {},
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 12,
+              "textAlign": "center",
+            },
+            Object {},
+            Object {
+              "color": "#888",
+            },
+          ]
+        }
+      >
+        通用标签
+         
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderRadius": 3,
+          "flexDirection": "row",
+          "overflow": "visible",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "borderRadius": 3,
+            "borderStyle": "solid",
+            "borderWidth": 0.5,
+            "overflow": "hidden",
+            "paddingHorizontal": 15,
+            "paddingVertical": 6,
+          },
+          Object {},
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#108ee9",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 12,
+              "textAlign": "center",
+            },
+            Object {},
+            Object {
+              "color": "#108ee9",
+            },
+          ]
+        }
+      >
+        默认选中标签
+         
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderRadius": 3,
+          "flexDirection": "row",
+          "overflow": "visible",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "borderRadius": 3,
+            "borderStyle": "solid",
+            "borderWidth": 0.5,
+            "overflow": "hidden",
+            "paddingHorizontal": 15,
+            "paddingVertical": 6,
+          },
+          Object {},
+          Object {
+            "backgroundColor": "#ddd",
+            "borderWidth": 0,
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 12,
+              "textAlign": "center",
+            },
+            Object {},
+            Object {
+              "color": "#bbb",
+            },
+          ]
+        }
+      >
+        失效标签
+         
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderRadius": 3,
+          "flexDirection": "row",
+          "overflow": "visible",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "borderRadius": 3,
+            "borderStyle": "solid",
+            "borderWidth": 0.5,
+            "overflow": "hidden",
+            "paddingHorizontal": 15,
+            "paddingVertical": 6,
+          },
+          Object {},
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 12,
+              "textAlign": "center",
+            },
+            Object {},
+            Object {
+              "color": "#888",
+            },
+          ]
+        }
+      >
+        事件回调
+         
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderRadius": 3,
+          "flexDirection": "row",
+          "overflow": "visible",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "borderRadius": 3,
+            "borderStyle": "solid",
+            "borderWidth": 0.5,
+            "overflow": "hidden",
+            "paddingHorizontal": 15,
+            "paddingVertical": 6,
+          },
+          Object {},
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 12,
+              "textAlign": "center",
+            },
+            Object {},
+            Object {
+              "color": "#888",
+            },
+          ]
+        }
+      >
+        可关闭标签
+         
+      </Text>
+    </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#bbb",
+            "position": "absolute",
+          },
+          Object {
+            "borderRadius": 8,
+            "height": 16,
+            "left": -5,
+            "overflow": "hidden",
+            "top": -4,
+            "width": 16,
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "#fff",
+              "fontSize": 20,
+              "lineHeight": 18,
+              "textAlign": "center",
+            },
+            Object {},
+          ]
+        }
+      >
+        ×
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderRadius": 3,
+          "flexDirection": "row",
+          "overflow": "visible",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      hitSlop={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "borderRadius": 3,
+            "borderStyle": "solid",
+            "borderWidth": 0.5,
+            "overflow": "hidden",
+            "paddingHorizontal": 15,
+            "paddingVertical": 6,
+          },
+          Object {
+            "paddingHorizontal": 5,
+            "paddingVertical": 1.5,
+          },
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+        ]
+      }
+      testID={undefined}
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "fontSize": 12,
+              "textAlign": "center",
+            },
+            Object {
+              "fontSize": 10,
+            },
+            Object {
+              "color": "#888",
+            },
+          ]
+        }
+      >
+        小号标签
+         
+      </Text>
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/tag/__tests__/__snapshots__/demo.test.web.js.snap b/components/tag/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..d638ff3d0fc
--- /dev/null
+++ b/components/tag/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
+<div
+  class="tag-container"
+>
+  <div
+    class="am-tag am-tag-normal"
+    data-seed="logId"
+  >
+    <div
+      class="am-tag-text"
+    >
+      通用标签
+    </div>
+  </div>
+  <div
+    class="am-tag am-tag-active"
+  >
+    <div
+      class="am-tag-text"
+    >
+      默认选中
+    </div>
+  </div>
+  <div
+    class="am-tag am-tag-disabled"
+  >
+    <div
+      class="am-tag-text"
+    >
+      失效标签
+    </div>
+  </div>
+  <div
+    class="am-tag am-tag-normal"
+  >
+    <div
+      class="am-tag-text"
+    >
+      事件回调
+    </div>
+  </div>
+  <div
+    class="am-tag am-tag-normal am-tag-closable"
+  >
+    <div
+      class="am-tag-text"
+    >
+      可关闭标签
+    </div>
+    <div
+      class="am-tag-close"
+    >
+      <svg
+        class="am-icon am-icon-cross-circle am-icon-xs"
+      >
+        <use
+          xlink:href="#cross-circle"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="am-tag am-tag-normal am-tag-small"
+  >
+    <div
+      class="am-tag-text"
+    >
+      小号只读标签
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/tag/__tests__/demo.test.js b/components/tag/__tests__/demo.test.js
new file mode 100644
index 00000000000..e6ba99d700a
--- /dev/null
+++ b/components/tag/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('tag');
diff --git a/components/tag/__tests__/demo.test.web.js b/components/tag/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..d482ec74ed3
--- /dev/null
+++ b/components/tag/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('tag');
diff --git a/components/textarea-item/__tests__/__snapshots__/demo.test.js.snap b/components/textarea-item/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..96e236ff7d6
--- /dev/null
+++ b/components/textarea-item/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,467 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/textarea-item/demo/basic.tsx correctly 1`] = `
+<ScrollView
+  automaticallyAdjustContentInsets={false}
+  showsHorizontalScrollIndicator={false}
+  showsVerticalScrollIndicator={false}
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={undefined}
+  >
+    <View>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "backgroundColor": "#f5f5f9",
+            "color": "#888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+            "paddingTop": 15,
+          }
+        }
+      >
+        基本
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#ddd",
+          "borderTopWidth": 0.5,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "marginLeft": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            Object {
+              "position": "relative",
+            },
+          ]
+        }
+      >
+        <TextInput
+          clearButtonMode="while-editing"
+          defaultValue={undefined}
+          editable={true}
+          keyboardType="default"
+          maxLength={undefined}
+          multiline={true}
+          numberOfLines={4}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="固定行数"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "fontSize": 17,
+                "lineHeight": 22,
+                "paddingHorizontal": 8,
+                "textAlignVertical": "top",
+              },
+              Object {
+                "color": "#000",
+                "paddingRight": 0,
+              },
+              Object {
+                "height": 96,
+              },
+            ]
+          }
+          underlineColorAndroid="transparent"
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "marginLeft": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            Object {
+              "position": "relative",
+            },
+          ]
+        }
+      >
+        <TextInput
+          clearButtonMode="while-editing"
+          defaultValue={undefined}
+          editable={true}
+          keyboardType="default"
+          maxLength={100}
+          multiline={true}
+          numberOfLines={4}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="多行带计数"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "fontSize": 17,
+                "lineHeight": 22,
+                "paddingHorizontal": 8,
+                "textAlignVertical": "top",
+              },
+              Object {
+                "color": "#000",
+                "paddingRight": 0,
+              },
+              Object {
+                "height": 96,
+              },
+            ]
+          }
+          underlineColorAndroid="transparent"
+        />
+        <View
+          style={
+            Array [
+              Object {
+                "bottom": 8,
+                "position": "absolute",
+                "right": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+          >
+            0
+             / 
+            100
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "marginLeft": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            Object {
+              "position": "relative",
+            },
+          ]
+        }
+      >
+        <TextInput
+          clearButtonMode="while-editing"
+          defaultValue={undefined}
+          editable={true}
+          keyboardType="default"
+          maxLength={undefined}
+          multiline={true}
+          numberOfLines={4}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="高度自适应"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "fontSize": 17,
+                "lineHeight": 22,
+                "paddingHorizontal": 8,
+                "textAlignVertical": "top",
+              },
+              Object {
+                "color": "#000",
+                "paddingRight": 0,
+              },
+              Object {
+                "height": 96,
+              },
+            ]
+          }
+          underlineColorAndroid="transparent"
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "marginLeft": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            Object {
+              "position": "relative",
+            },
+          ]
+        }
+      >
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={true}
+          keyboardType="default"
+          maxLength={undefined}
+          multiline={false}
+          numberOfLines={1}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "fontSize": 17,
+                "lineHeight": 22,
+                "paddingHorizontal": 8,
+                "textAlignVertical": "top",
+              },
+              Object {
+                "color": "#000",
+                "paddingRight": 0,
+              },
+              Object {
+                "height": 45,
+              },
+            ]
+          }
+          underlineColorAndroid="transparent"
+          value="默认带value"
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "marginLeft": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            Object {
+              "position": "relative",
+            },
+          ]
+        }
+      >
+        <TextInput
+          clearButtonMode="while-editing"
+          editable={false}
+          keyboardType="default"
+          maxLength={undefined}
+          multiline={false}
+          numberOfLines={1}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "fontSize": 17,
+                "lineHeight": 22,
+                "paddingHorizontal": 8,
+                "textAlignVertical": "top",
+              },
+              Object {
+                "color": "#000",
+                "paddingRight": 0,
+              },
+              Object {
+                "height": 45,
+              },
+            ]
+          }
+          underlineColorAndroid="transparent"
+          value="不可编辑 editable = {false}"
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "marginLeft": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            Object {
+              "position": "relative",
+            },
+          ]
+        }
+      >
+        <TextInput
+          clearButtonMode="never"
+          defaultValue={undefined}
+          editable={true}
+          keyboardType="default"
+          maxLength={undefined}
+          multiline={false}
+          numberOfLines={1}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="不显示清除按钮"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "fontSize": 17,
+                "lineHeight": 22,
+                "paddingHorizontal": 8,
+                "textAlignVertical": "top",
+              },
+              Object {
+                "color": "#000",
+                "paddingRight": 0,
+              },
+              Object {
+                "height": 45,
+              },
+            ]
+          }
+          underlineColorAndroid="transparent"
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "marginLeft": 15,
+            },
+            Object {
+              "borderBottomWidth": 0.5,
+            },
+            Object {
+              "position": "relative",
+            },
+          ]
+        }
+      >
+        <TextInput
+          clearButtonMode="while-editing"
+          defaultValue="报错样式 error={true}"
+          editable={true}
+          keyboardType="default"
+          maxLength={undefined}
+          multiline={false}
+          numberOfLines={1}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#fff",
+                "fontSize": 17,
+                "lineHeight": 22,
+                "paddingHorizontal": 8,
+                "textAlignVertical": "top",
+              },
+              Object {
+                "color": "#f50",
+                "paddingRight": 30,
+              },
+              Object {
+                "height": 45,
+              },
+            ]
+          }
+          underlineColorAndroid="transparent"
+        />
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          hitSlop={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "position": "absolute",
+                "right": 18,
+                "top": 12,
+              },
+            ]
+          }
+          testID={undefined}
+        >
+          <Image
+            source={1}
+            style={
+              Object {
+                "height": 18,
+                "width": 18,
+              }
+            }
+          />
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#fff",
+              "borderBottomColor": "#ddd",
+              "borderBottomWidth": 0.5,
+              "bottom": 0,
+              "height": 1,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+          ]
+        }
+      />
+    </View>
+  </View>
+</ScrollView>
+`;
diff --git a/components/textarea-item/__tests__/__snapshots__/demo.test.web.js.snap b/components/textarea-item/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..8fca2c8da97
--- /dev/null
+++ b/components/textarea-item/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,357 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/textarea-item/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      自定义获取光标
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-textarea-item"
+      >
+        <div
+          class="am-textarea-label am-textarea-label-5"
+        >
+          标题
+        </div>
+        <div
+          class="am-textarea-control"
+        >
+          <textarea
+            data-seed="logId"
+            placeholder="自动获取光标"
+            rows="1"
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-textarea-item"
+      >
+        <div
+          class="am-textarea-label am-textarea-label-5"
+        >
+          标题
+        </div>
+        <div
+          class="am-textarea-control"
+        >
+          <textarea
+            data-seed="logId"
+            placeholder="点击下方按钮该输入框会获取光标"
+            rows="1"
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-list-item-middle"
+      >
+        <div
+          class="am-list-line"
+        >
+          <div
+            class="am-list-content"
+          >
+            <div
+              style="width:100%;color:#108ee9;text-align:center;"
+            >
+              点击获取光标
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      受控 / 非受控
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-textarea-item am-textarea-item-single-line"
+      >
+        <div
+          class="am-textarea-label am-textarea-label-5"
+        >
+          受控组件
+        </div>
+        <div
+          class="am-textarea-control"
+        >
+          <textarea
+            placeholder="Hello World"
+            rows="1"
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-textarea-item am-textarea-item-single-line"
+      >
+        <div
+          class="am-textarea-label am-textarea-label-5"
+        >
+          非受控组件
+        </div>
+        <div
+          class="am-textarea-control"
+        >
+          <textarea
+            placeholder="请输入内容"
+            rows="1"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      高度自适应 / 固定
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-textarea-item"
+      >
+        <div
+          class="am-textarea-label am-textarea-label-5"
+        >
+          高度自适应
+        </div>
+        <div
+          class="am-textarea-control"
+        >
+          <textarea
+            placeholder=""
+            rows="1"
+          />
+        </div>
+      </div>
+      <div
+        class="am-list-item am-textarea-item"
+      >
+        <div
+          class="am-textarea-control"
+        >
+          <textarea
+            placeholder="固定行数,rows"
+            rows="3"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      带清除按钮
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-textarea-item am-textarea-item-single-line"
+      >
+        <div
+          class="am-textarea-label am-textarea-label-5"
+        >
+          标题
+        </div>
+        <div
+          class="am-textarea-control"
+        >
+          <textarea
+            placeholder="输入会显示清除按钮"
+            rows="1"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      标题可自定义（文字 / 图片 / 无标题）
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-textarea-item am-textarea-item-single-line"
+      >
+        <div
+          class="am-textarea-label am-textarea-label-5"
+        >
+          <img
+            src="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
+            style="width:0.56rem;height:0.56rem;"
+          />
+        </div>
+        <div
+          class="am-textarea-control"
+        >
+          <textarea
+            placeholder="标题可以自定义"
+            rows="1"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      限制输入字符数量
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-textarea-item am-textarea-item-single-line"
+      >
+        <div
+          class="am-textarea-control"
+        >
+          <textarea
+            maxlength="10"
+            placeholder="最多输入10个字符"
+            rows="1"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      带计数
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-textarea-item"
+      >
+        <div
+          class="am-textarea-control"
+        >
+          <textarea
+            maxlength="100"
+            placeholder=""
+            rows="5"
+          >
+            计数功能,我的意见是...
+          </textarea>
+        </div>
+        <span
+          class="am-textarea-count"
+        >
+          <span>
+            13
+          </span>
+          /100
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    class="am-list"
+  >
+    <div
+      class="am-list-header"
+    >
+      不可编辑 / 禁用
+    </div>
+    <div
+      class="am-list-body"
+    >
+      <div
+        class="am-list-item am-textarea-item am-textarea-item-single-line"
+      >
+        <div
+          class="am-textarea-label am-textarea-label-5"
+        >
+          姓名
+        </div>
+        <div
+          class="am-textarea-control"
+        >
+          <textarea
+            placeholder=""
+            readonly=""
+            rows="1"
+          >
+            不可编辑
+          </textarea>
+        </div>
+      </div>
+      <div
+        class="am-list-item am-textarea-item am-textarea-disabled am-textarea-item-single-line"
+      >
+        <div
+          class="am-textarea-label am-textarea-label-5"
+        >
+          姓名
+        </div>
+        <div
+          class="am-textarea-control"
+        >
+          <textarea
+            disabled=""
+            placeholder=""
+            rows="1"
+          >
+            这个是禁用的样式
+          </textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/textarea-item/__tests__/demo.test.js b/components/textarea-item/__tests__/demo.test.js
new file mode 100644
index 00000000000..34a18bd8b5f
--- /dev/null
+++ b/components/textarea-item/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('textarea-item');
diff --git a/components/textarea-item/__tests__/demo.test.web.js b/components/textarea-item/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..d0375aac383
--- /dev/null
+++ b/components/textarea-item/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('textarea-item');
diff --git a/components/toast/__tests__/__snapshots__/demo.test.js.snap b/components/toast/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..e78d3a85e2e
--- /dev/null
+++ b/components/toast/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,539 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginLeft": 15,
+        "marginRight": 15,
+      },
+      Object {
+        "marginTop": 80,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "height": 42,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+          },
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+          false,
+          false,
+          false,
+          undefined,
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "fontSize": 18,
+          },
+          Object {
+            "color": "#000",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      无 mask
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "height": 42,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+          },
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+          false,
+          false,
+          false,
+          undefined,
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "fontSize": 18,
+          },
+          Object {
+            "color": "#000",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      纯文字 toast
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "height": 42,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+          },
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+          false,
+          false,
+          false,
+          undefined,
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "fontSize": 18,
+          },
+          Object {
+            "color": "#000",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      成功 toast
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "height": 42,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+          },
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+          false,
+          false,
+          false,
+          undefined,
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "fontSize": 18,
+          },
+          Object {
+            "color": "#000",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      失败 toast
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "height": 42,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+          },
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+          false,
+          false,
+          false,
+          undefined,
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "fontSize": 18,
+          },
+          Object {
+            "color": "#000",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      网络 toast
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "height": 42,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+          },
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+          false,
+          false,
+          false,
+          undefined,
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "fontSize": 18,
+          },
+          Object {
+            "color": "#000",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      加载中 toast
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessibilityComponentType={undefined}
+    accessibilityLabel={undefined}
+    accessibilityTraits={undefined}
+    accessible={true}
+    hitSlop={undefined}
+    onLayout={undefined}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "justifyContent": "center",
+          },
+          Object {
+            "height": 42,
+            "paddingLeft": 15,
+            "paddingRight": 15,
+          },
+          Object {
+            "backgroundColor": "#fff",
+            "borderColor": "#ddd",
+          },
+          false,
+          false,
+          false,
+          undefined,
+        ],
+      ]
+    }
+    testID={undefined}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "fontSize": 18,
+          },
+          Object {
+            "color": "#000",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      duration 为 0 的 toast
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
diff --git a/components/toast/__tests__/__snapshots__/demo.test.web.js.snap b/components/toast/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..2eb40edc84d
--- /dev/null
+++ b/components/toast/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/toast/demo/basic.md correctly 1`] = `
+<div
+  class="am-wingblank am-wingblank-lg"
+>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      纯文字 toast
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      无 mask
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      成功 toast
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      失败 toast
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      网络 toast
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <a
+    class="am-button"
+    role="button"
+  >
+    <span>
+      加载中 toast
+    </span>
+  </a>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+</div>
+`;
diff --git a/components/toast/__tests__/demo.test.js b/components/toast/__tests__/demo.test.js
new file mode 100644
index 00000000000..15c81f1f7a1
--- /dev/null
+++ b/components/toast/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('toast');
diff --git a/components/toast/__tests__/demo.test.web.js b/components/toast/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..96901ec0d88
--- /dev/null
+++ b/components/toast/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('toast');
diff --git a/components/white-space/__tests__/__snapshots__/demo.test.js.snap b/components/white-space/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..ae94d336bde
--- /dev/null
+++ b/components/white-space/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/white-space/demo/basic.tsx correctly 1`] = `
+<View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 3,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Object {
+        "backgroundColor": "#ebebef",
+        "height": 30,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "color": "#bbb",
+          "lineHeight": 30,
+          "textAlign": "center",
+        }
+      }
+    >
+      Block
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 6,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Object {
+        "backgroundColor": "#ebebef",
+        "height": 30,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "color": "#bbb",
+          "lineHeight": 30,
+          "textAlign": "center",
+        }
+      }
+    >
+      Block
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Object {
+        "backgroundColor": "#ebebef",
+        "height": 30,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "color": "#bbb",
+          "lineHeight": 30,
+          "textAlign": "center",
+        }
+      }
+    >
+      Block
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Object {
+        "backgroundColor": "#ebebef",
+        "height": 30,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "color": "#bbb",
+          "lineHeight": 30,
+          "textAlign": "center",
+        }
+      }
+    >
+      Block
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 21,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Object {
+        "backgroundColor": "#ebebef",
+        "height": 30,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Object {
+          "color": "#bbb",
+          "lineHeight": 30,
+          "textAlign": "center",
+        }
+      }
+    >
+      Block
+    </Text>
+  </View>
+</View>
+`;
diff --git a/components/white-space/__tests__/__snapshots__/demo.test.web.js.snap b/components/white-space/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..c06d076f4aa
--- /dev/null
+++ b/components/white-space/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/white-space/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="am-whitespace am-whitespace-xs"
+  />
+  <div
+    style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+  >
+    Block
+  </div>
+  <div
+    class="am-whitespace am-whitespace-sm"
+  />
+  <div
+    style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+  >
+    Block
+  </div>
+  <div
+    class="am-whitespace am-whitespace-md"
+  />
+  <div
+    style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+  >
+    Block
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+  >
+    Block
+  </div>
+  <div
+    class="am-whitespace am-whitespace-xl"
+  />
+  <div
+    style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+  >
+    Block
+  </div>
+</div>
+`;
diff --git a/components/white-space/__tests__/demo.test.js b/components/white-space/__tests__/demo.test.js
new file mode 100644
index 00000000000..22ff667b680
--- /dev/null
+++ b/components/white-space/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('white-space');
diff --git a/components/white-space/__tests__/demo.test.web.js b/components/white-space/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..ddf85ad4242
--- /dev/null
+++ b/components/white-space/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('white-space');
diff --git a/components/wing-blank/__tests__/__snapshots__/demo.test.js.snap b/components/wing-blank/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 00000000000..2f75ac17b4d
--- /dev/null
+++ b/components/wing-blank/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/wing-blank/demo/basic.tsx correctly 1`] = `
+<View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 9,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 15,
+          "marginRight": 15,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#ebebef",
+          "height": 30,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "color": "#bbb",
+            "lineHeight": 30,
+            "textAlign": "center",
+          }
+        }
+      >
+        Block
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 8,
+          "marginRight": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#ebebef",
+          "height": 30,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "color": "#bbb",
+            "lineHeight": 30,
+            "textAlign": "center",
+          }
+        }
+      >
+        Block
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 15,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 5,
+          "marginRight": 5,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#ebebef",
+          "height": 30,
+        }
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "color": "#bbb",
+            "lineHeight": 30,
+            "textAlign": "center",
+          }
+        }
+      >
+        Block
+      </Text>
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/wing-blank/__tests__/__snapshots__/demo.test.web.js.snap b/components/wing-blank/__tests__/__snapshots__/demo.test.web.js.snap
new file mode 100644
index 00000000000..3b72d4d53b4
--- /dev/null
+++ b/components/wing-blank/__tests__/__snapshots__/demo.test.web.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/wing-blank/demo/basic.md correctly 1`] = `
+<div
+  style="padding:0.3rem 0;"
+>
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <div
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Block
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-wingblank am-wingblank-md"
+  >
+    <div
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Block
+    </div>
+  </div>
+  <div
+    class="am-whitespace am-whitespace-lg"
+  />
+  <div
+    class="am-wingblank am-wingblank-sm"
+  >
+    <div
+      style="background-color:#ebebef;color:#bbb;text-align:center;height:0.6rem;line-height:0.6rem;width:100%;"
+    >
+      Block
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/wing-blank/__tests__/demo.test.js b/components/wing-blank/__tests__/demo.test.js
new file mode 100644
index 00000000000..99adfb2d83b
--- /dev/null
+++ b/components/wing-blank/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import { nativeDemotest } from '../../../tests/shared/demoTest';
+
+nativeDemotest('wing-blank');
diff --git a/components/wing-blank/__tests__/demo.test.web.js b/components/wing-blank/__tests__/demo.test.web.js
new file mode 100644
index 00000000000..589503d7706
--- /dev/null
+++ b/components/wing-blank/__tests__/demo.test.web.js
@@ -0,0 +1,3 @@
+import { webDemoTest } from '../../../tests/shared/demoTest';
+
+webDemoTest('wing-blank');
diff --git a/package.json b/package.json
index c7144e72e84..aabfd1b6fc2 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "@types/react-dom": "~0.14.18",
     "@types/react-native": "~0.37.8",
     "antd": "2.x",
+    "antd-demo-jest": "^1.1.0",
     "antd-mobile-demo-data": "^0.1.1",
     "antd-tools": "^0.16.1",
     "babel-eslint": "^7.1.0",
@@ -104,6 +105,7 @@
     "lesshint": "^2.1.0",
     "lint-staged": "^3.3.1",
     "lodash.debounce": "^4.0.6",
+    "mockdate": "^2.0.1",
     "postcss-pxtorem": "^3.3.1",
     "pre-commit": "1.x",
     "promise": "~7.0.4",
@@ -139,7 +141,9 @@
     "pre-publish": "node ./scripts/build-less-entry",
     "prepublish": "antd-tools run guard",
     "test": "npm run lint && npm run dist",
-    "jest": "jest",
+    "jest": "npm run jest:rn && npm run jest:web",
+    "jest:rn": "jest --config .jest.json",
+    "jest:web": "jest --config .jest.web.json",
     "authors": "git log --format='%aN <%aE>' | sort -u | grep -v 'users.noreply.github.com' > AUTHORS.txt",
     "dist": "antd-tools run dist",
     "build": "npm run dist",
@@ -178,34 +182,6 @@
       "lint-staged:demo"
     ]
   },
-  "jest": {
-    "preset": "react-native",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "md"
-    ],
-    "modulePathIgnorePatterns": [
-      "/_site/"
-    ],
-    "testPathIgnorePatterns": [
-      "dekko",
-      "/node_modules/",
-      "node"
-    ],
-    "transform": {
-      "\\.tsx?$": "./node_modules/typescript-babel-jest",
-      "\\.js$": "./node_modules/babel-jest"
-    },
-    "testRegex": ".*\\.test\\.js$",
-    "collectCoverageFrom": [
-      "components/**/*.{ts,tsx}",
-      "!components/*/style/index.tsx"
-    ]
-  },
   "config": {
     "port": 8001
   },
diff --git a/rn-kitchen-sink/android/app/build.gradle b/rn-kitchen-sink/android/app/build.gradle
index d5d64c26340..a5e9f518eda 100644
--- a/rn-kitchen-sink/android/app/build.gradle
+++ b/rn-kitchen-sink/android/app/build.gradle
@@ -89,7 +89,7 @@ def enableProguardInReleaseBuilds = false
 
 android {
     compileSdkVersion 23
-    buildToolsVersion "23.0.1"
+    buildToolsVersion "23.0.3"
 
     defaultConfig {
         applicationId "com.antm"
diff --git a/tests/imageStub.js b/tests/imageStub.js
new file mode 100644
index 00000000000..ff3177babdd
--- /dev/null
+++ b/tests/imageStub.js
@@ -0,0 +1 @@
+export default true;
diff --git a/tests/setup.js b/tests/setup.js
new file mode 100644
index 00000000000..68039c70ac1
--- /dev/null
+++ b/tests/setup.js
@@ -0,0 +1,57 @@
+// https://github.com/facebook/jest/issues/2208#issuecomment-264733133
+jest.mock('Linking', () => ({
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn(),
+  openURL: jest.fn(),
+  canOpenURL: jest.fn(),
+  getInitialURL: jest.fn(),
+}));
+
+// https://github.com/facebook/react-native/pull/12682
+jest.mock('UIManager', () => ({
+  createView: jest.fn(),
+  setChildren: jest.fn(),
+  manageChildren: jest.fn(),
+  updateView: jest.fn(),
+  removeSubviewsFromContainerWithID: jest.fn(),
+  replaceExistingNonRootView: jest.fn(),
+  removeRootView: jest.fn(),
+  focus: jest.fn(),
+  blur: jest.fn(),
+  findSubviewIn: jest.fn(),
+  dispatchViewManagerCommand: jest.fn(),
+  measure: jest.fn(),
+  measureInWindow: jest.fn(),
+  viewIsDescendantOf: jest.fn(),
+  measureLayout: jest.fn(),
+  measureLayoutRelativeToParent: jest.fn(),
+  measureViewsInRect: jest.fn(),
+  takeSnapshot: jest.fn(),
+  setJSResponder: jest.fn(),
+  clearJSResponder: jest.fn(),
+  configureNextLayoutAnimation: jest.fn(),
+  getContentSizeMultiplier: jest.fn(),
+  customBubblingEventTypes: {},
+  customDirectEventTypes: {},
+  Dimensions: {
+    window: {
+      fontScale: 2,
+      height: 1334,
+      scale: 2,
+      width: 750,
+    },
+  },
+  ModalFullscreenView: {
+    Constants: {},
+  },
+  ScrollView: {
+    Constants: {},
+  },
+  View: {
+    Constants: {},
+  },
+}));
+
+// https://github.com/facebook/react-native/issues/11969
+global.cancelAnimationFrame = jest.fn();
+global.requestAnimationFrame = jest.fn();
diff --git a/tests/shared/demoTest.js b/tests/shared/demoTest.js
new file mode 100644
index 00000000000..9e0be57232e
--- /dev/null
+++ b/tests/shared/demoTest.js
@@ -0,0 +1,41 @@
+import glob from 'glob';
+import React from 'react';
+import { render } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import renderer from 'react-test-renderer';
+import MockDate from 'mockdate';
+
+export function webDemoTest(component, options = {}) {
+  const files = glob.sync(`./components/${component}/demo/*.md`);
+
+  files.forEach((file) => {
+    let testMethod = options.skip === true ? test.skip : test;
+    if (Array.isArray(options.skip) && options.skip.some(c => file.includes(c))) {
+      testMethod = test.skip;
+    }
+    testMethod(`renders ${file} correctly`, () => {
+      MockDate.set(new Date('2016-11-22').getTime() + (new Date().getTimezoneOffset() * 60 * 1000));
+      const demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
+      const wrapper = render(demo);
+      expect(renderToJson(wrapper)).toMatchSnapshot();
+      MockDate.reset();
+    });
+  });
+}
+
+export function nativeDemotest(component, options = {}) {
+  const files = glob.sync(`./components/${component}/demo/*.tsx`);
+
+  files.forEach((file) => {
+    let testMethod = options.skip === true ? test.skip : test;
+    if (Array.isArray(options.skip) && options.skip.some(c => file.includes(c))) {
+      testMethod = test.skip;
+    }
+
+    testMethod(`renders ${file} correctly`, () => {
+      const Demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
+      const tree = renderer.create(<Demo />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+}