File tree Expand file tree Collapse file tree 23 files changed +27
-27
lines changed Expand file tree Collapse file tree 23 files changed +27
-27
lines changed Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ ActionSheet 动作面板
3
3
4
4
该组件提供了一种动作面板, 底部缓缓出现
5
5
6
- <image src =' https://user-images.githubusercontent.com/57083007/137631382-70df5dd3-0200-4ddb-bd11-3578ee99d032.gif ' alt =' ActionSheet ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/57083007/137631382-70df5dd3-0200-4ddb-bd11-3578ee99d032.gif ' alt =' ActionSheet ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ Avatar 头像
3
3
4
4
用来代表用户或事物,支持图片展示,当前是基于 React Native 组件 Image 封装,你也可以使用更快的图片展示插件 [ react-native-fast-image] ( https://github.com/DylanVann/react-native-fast-image ) 。
5
5
6
- <image src =' https://user-images.githubusercontent.com/57083007/137631738-4338453c-c552-4caa-9261-8fd84c018942.png ' alt =' Avatar ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/57083007/137631738-4338453c-c552-4caa-9261-8fd84c018942.png ' alt =' Avatar ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change 1
1
Badge 标记
2
2
---
3
3
4
- <image src =' https://user-images.githubusercontent.com/57083007/137631808-f3899eb4-69c1-4dd5-a686-0f8bb38fe4b6.png ' alt =' Badge ' style =' zoom :33% ;' />
4
+ <img src =' https://user-images.githubusercontent.com/57083007/137631808-f3899eb4-69c1-4dd5-a686-0f8bb38fe4b6.png ' alt =' Badge ' style =' zoom :33% ;' />
5
5
6
6
### 基础示例
7
7
Original file line number Diff line number Diff line change @@ -3,8 +3,8 @@ Button 按钮
3
3
4
4
按钮用于开始一个即时操作。
5
5
6
- <image src =' https://user-images.githubusercontent.com/57083007/137631908-57393986-82b8-4e2e-b753-aa77dac58672.png ' alt =' Button ' style =' zoom :33% ;' />
7
- <image src =' https://user-images.githubusercontent.com/57083007/137631915-8281cbac-ba0d-4795-8f8b-8274bcecc172.png ' alt =' Button ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/57083007/137631908-57393986-82b8-4e2e-b753-aa77dac58672.png ' alt =' Button ' style =' zoom :33% ;' />
7
+ <img src =' https://user-images.githubusercontent.com/57083007/137631915-8281cbac-ba0d-4795-8f8b-8274bcecc172.png ' alt =' Button ' style =' zoom :33% ;' />
8
8
9
9
### 基础示例
10
10
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ ButtonGroup 按钮组
3
3
4
4
用于一组按钮的排版展示。
5
5
6
- <image src =' https://user-images.githubusercontent.com/57083007/137632086-8441bd1b-e8f9-4c15-828d-ad86310fdb72.png ' alt =' ButtonGroup ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/57083007/137632086-8441bd1b-e8f9-4c15-828d-ad86310fdb72.png ' alt =' ButtonGroup ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change 3
3
4
4
最基础的卡片容器,可承载文字、列表、图片、段落。
5
5
6
- <image src =' https://user-images.githubusercontent.com/57083007/137632175-fc80bff2-7224-4843-97ec-9f8d9cbc6746.png ' alt =' Card ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/57083007/137632175-fc80bff2-7224-4843-97ec-9f8d9cbc6746.png ' alt =' Card ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ CardCollapse 可折叠卡片列表
3
3
4
4
可折叠卡片列表
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/137702190-e48c11e3-77d9-40c3-8d59-09ac6ddc9efb.gif ' alt =' CardCollapse ' style =' zoom :100% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/137702190-e48c11e3-77d9-40c3-8d59-09ac6ddc9efb.gif ' alt =' CardCollapse ' style =' zoom :100% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change @@ -5,7 +5,7 @@ CheckBox 复选框
5
5
6
6
### 基础示例
7
7
8
- <image src =' https://user-images.githubusercontent.com/66067296/137703908-c4370f9c-fce7-423a-abd7-7951d5a48d06.png ' alt =' CheckBox ' style =' zoom :33% ;' />
8
+ <img src =' https://user-images.githubusercontent.com/66067296/137703908-c4370f9c-fce7-423a-abd7-7951d5a48d06.png ' alt =' CheckBox ' style =' zoom :33% ;' />
9
9
10
10
``` jsx
11
11
import { CheckBox } from ' @uiw/react-native' ;
Original file line number Diff line number Diff line change 1
1
Divider 分割线
2
2
---
3
3
4
- <image src =' https://user-images.githubusercontent.com/66067296/137705210-c1bd655f-8b0c-4ee1-b376-0bc59c573a61.png ' alt =' Divider ' style =' zoom :33% ;' />
4
+ <img src =' https://user-images.githubusercontent.com/66067296/137705210-c1bd655f-8b0c-4ee1-b376-0bc59c573a61.png ' alt =' Divider ' style =' zoom :33% ;' />
5
5
6
6
区隔内容的分割线。
7
7
Original file line number Diff line number Diff line change 1
1
Drawer 抽屉
2
2
---
3
3
4
- <image src =' https://user-images.githubusercontent.com/66067296/137705595-a9eb337a-90f7-42bd-a662-579063731db3.gif ' alt =' Drawer ' style =' zoom :33% ;' />
4
+ <img src =' https://user-images.githubusercontent.com/66067296/137705595-a9eb337a-90f7-42bd-a662-579063731db3.gif ' alt =' Drawer ' style =' zoom :33% ;' />
5
5
6
6
用于在屏幕边缘显示应用导航等内容的面板。
7
7
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ Ellipsis 超出省略
3
3
4
4
用于文本过长,超出长度显示 ` ... ` 。
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/137707584-8883d475-52a7-4022-a6dd-ceb91be028e2.png ' alt =' Ellipsis ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/137707584-8883d475-52a7-4022-a6dd-ceb91be028e2.png ' alt =' Ellipsis ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ Empty 空状态
3
3
4
4
空状态时的展示占位图。
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/137707848-8603fc59-3904-437d-9908-53cd621a1a0e.png ' alt =' Empty ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/137707848-8603fc59-3904-437d-9908-53cd621a1a0e.png ' alt =' Empty ' style =' zoom :33% ;' />
7
7
8
8
9
9
### 基础示例
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ ExpandableSection 展开缩放
3
3
4
4
ExpandableSection 组件以在 sectionHeader标题 下方或上方呈现展开的内容部分
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/137708253-1b6c2dfb-9c89-477a-a6ea-0c46120bf86d.gif ' alt =' ExpandableSection ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/137708253-1b6c2dfb-9c89-477a-a6ea-0c46120bf86d.gif ' alt =' ExpandableSection ' style =' zoom :33% ;' />
7
7
8
8
9
9
### 基础示例
Original file line number Diff line number Diff line change @@ -5,9 +5,9 @@ Flex Flex布局
5
5
Flex 是 React Native CSS flex 布局的一个封装。
6
6
7
7
8
- <image src =' https://user-images.githubusercontent.com/66067296/137708776-ad9d357f-9aad-4131-8bb1-408f4ae90a08.png ' alt =' Flex ' style =' zoom :33% ;' />
9
- <image src =' https://user-images.githubusercontent.com/66067296/137708793-79f69f8b-1d8d-4278-9aa9-6562ea6f1094.png ' alt =' Flex1 ' style =' zoom :33% ;' />
10
- <image src =' https://user-images.githubusercontent.com/66067296/137708799-435612a4-0139-411e-b7fa-b9f4c63be07f.png ' alt =' Flex2 ' style =' zoom :33% ;' />
8
+ <img src =' https://user-images.githubusercontent.com/66067296/137708776-ad9d357f-9aad-4131-8bb1-408f4ae90a08.png ' alt =' Flex ' style =' zoom :33% ;' />
9
+ <img src =' https://user-images.githubusercontent.com/66067296/137708793-79f69f8b-1d8d-4278-9aa9-6562ea6f1094.png ' alt =' Flex1 ' style =' zoom :33% ;' />
10
+ <img src =' https://user-images.githubusercontent.com/66067296/137708799-435612a4-0139-411e-b7fa-b9f4c63be07f.png ' alt =' Flex2 ' style =' zoom :33% ;' />
11
11
12
12
### 基础示例
13
13
Original file line number Diff line number Diff line change 3
3
4
4
在水平和垂直方向,将布局切分成若干等大的区块,也可以使用 ` List ` 组件支持列显示的特性,展示宫格,同时支持下来刷新等特性。
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/137709398-3d7476dd-009d-4852-abed-69b3726c3a25.png ' alt =' Grid ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/137709398-3d7476dd-009d-4852-abed-69b3726c3a25.png ' alt =' Grid ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change 3
3
4
4
图标组件通过 [ ` react-native-svg ` ] ( https://github.com/react-native-community/react-native-svg ) 支持 svg 图标,基于这一特性封装图标组件库,它不是基于字体文件封装的组件,相比字体图标组件易于扩展体积较小。预览[ 所有的图标] ( https://uiwjs.github.io/icons ) 。
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/137710056-d7fe4b94-7b98-4e18-a235-5a4e70beaa05.png ' alt =' Icon ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/137710056-d7fe4b94-7b98-4e18-a235-5a4e70beaa05.png ' alt =' Icon ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change 3
3
4
4
单个连续模块垂直排列,显示当前的内容、状态和可进行的操作。eg:联系人列表。
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/139397639-1bb004ac-fd66-495e-8991-6b6910f84e60.png ' alt =' List1 ' style =' zoom :33% ;' />
7
- <image src =' https://user-images.githubusercontent.com/66067296/139397695-5de2fb65-4931-454b-baed-9115a80abebc.png ' alt =' List2 ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/139397639-1bb004ac-fd66-495e-8991-6b6910f84e60.png ' alt =' List1 ' style =' zoom :33% ;' />
7
+ <img src =' https://user-images.githubusercontent.com/66067296/139397695-5de2fb65-4931-454b-baed-9115a80abebc.png ' alt =' List2 ' style =' zoom :33% ;' />
8
8
9
9
### 基础示例
10
10
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ Loader 加载
3
3
4
4
表明某个任务正在进行中。
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/139398047-e59f2b9d-ced1-46d2-b45c-b9e35d04b825.gif ' alt =' Loader ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/139398047-e59f2b9d-ced1-46d2-b45c-b9e35d04b825.gif ' alt =' Loader ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ MaskLayer 遮罩层
3
3
4
4
用于模态对话框,中的遮罩层。
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/139398306-d038225d-0fee-4009-a4f7-a06c7beabf45.gif ' alt =' MaskLayer ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/139398306-d038225d-0fee-4009-a4f7-a06c7beabf45.gif ' alt =' MaskLayer ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ MenuDropdown
3
3
4
4
菜单下拉按钮
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/139398975-4c6e1e06-385d-4729-a467-5799cfa0bb9c.gif ' alt =' MenuDropdown ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/139398975-4c6e1e06-385d-4729-a467-5799cfa0bb9c.gif ' alt =' MenuDropdown ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ Modal 模态框
3
3
4
4
模态对话框。
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/139399162-48bcc944-ad6d-424c-bca8-2d4e0fc1a764.gif ' alt =' Modal ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/139399162-48bcc944-ad6d-424c-bca8-2d4e0fc1a764.gif ' alt =' Modal ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ NoticeBar 通告栏
3
3
4
4
在导航栏下方,一般用作系统提醒、活动提醒等通知。
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/139399394-1eb887bc-6726-43a0-a158-22a25ebf9350.gif ' alt =' NoticeBar ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/139399394-1eb887bc-6726-43a0-a158-22a25ebf9350.gif ' alt =' NoticeBar ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
Original file line number Diff line number Diff line change @@ -3,7 +3,7 @@ Pagination 分页器
3
3
4
4
用于展示页码、请求数据等。
5
5
6
- <image src =' https://user-images.githubusercontent.com/66067296/139399708-239e65f9-565e-4be2-9497-c8e5b836cef6.png ' alt =' Pagination ' style =' zoom :33% ;' />
6
+ <img src =' https://user-images.githubusercontent.com/66067296/139399708-239e65f9-565e-4be2-9497-c8e5b836cef6.png ' alt =' Pagination ' style =' zoom :33% ;' />
7
7
8
8
### 基础示例
9
9
You can’t perform that action at this time.
0 commit comments