doc: 更新文档添加组件预览图片 (#293)

* fix:发布 iOS 应用商店:一. 创建AppID

* fix:发布 iOS 应用商店优化排版

* fix:ios应用商店文档更新及排版优化

* fix:修改环境安装文档语法错误及部分内容优化

* fix:更新ios应用发布流程

* fix:ios应用商店发布更新

* fix:更新ios及安卓应用商店发布

* fix:安卓上架更新

* fix:增加button自定义文本实例

* fix:增加checkBox复选框size调整及文档描述效果展示

* doc:更新文档导入图片

* doc(website): Update Readme.md

Co-authored-by: 杨楠 <[email protected]>

Author: Amber-Nan

packages/core/src/CardCollapse/README.md

@@ -3,6 +3,8 @@ CardCollapse 可折叠卡片列表
 
 可折叠卡片列表
 
+<image src='https://user-images.githubusercontent.com/66067296/137702190-e48c11e3-77d9-40c3-8d59-09ac6ddc9efb.gif' alt='CardCollapse' style='zoom:100%;' />
+
 ### 基础示例
 
 <!--DemoStart--> 

packages/core/src/CheckBox/README.md

@@ -5,6 +5,8 @@ CheckBox 复选框
 
 ### 基础示例
 
+<image src='https://user-images.githubusercontent.com/66067296/137703908-c4370f9c-fce7-423a-abd7-7951d5a48d06.png' alt='CheckBox' style='zoom:33%;' />
+
 ```jsx
 import { CheckBox } from '@uiw/react-native';
 

packages/core/src/Divider/README.md

@@ -1,6 +1,8 @@
 Divider 分割线
 ---
 
+<image src='https://user-images.githubusercontent.com/66067296/137705210-c1bd655f-8b0c-4ee1-b376-0bc59c573a61.png' alt='Divider' style='zoom:33%;' />
+
 区隔内容的分割线。
 
 ### 基础示例

packages/core/src/Drawer/README.md

@@ -1,6 +1,8 @@
 Drawer 抽屉
 ---
 
+<image src='https://user-images.githubusercontent.com/66067296/137705595-a9eb337a-90f7-42bd-a662-579063731db3.gif' alt='Drawer' style='zoom:33%;' />
+
 用于在屏幕边缘显示应用导航等内容的面板。
 
 ### 基础示例

packages/core/src/Ellipsis/README.md

@@ -3,6 +3,8 @@ Ellipsis 超出省略
 
 用于文本过长，超出长度显示 `...`。
 
+<image src='https://user-images.githubusercontent.com/66067296/137707584-8883d475-52a7-4022-a6dd-ceb91be028e2.png' alt='Ellipsis' style='zoom:33%;' />
+
 ### 基础示例
 
 ```jsx

packages/core/src/Empty/README.md

@@ -3,6 +3,9 @@ Empty 空状态
 
 空状态时的展示占位图。
 
+<image src='https://user-images.githubusercontent.com/66067296/137707848-8603fc59-3904-437d-9908-53cd621a1a0e.png' alt='Empty' style='zoom:33%;' />
+
+
 ### 基础示例
 
 <!--DemoStart--> 

packages/core/src/ExpandableSection/README.md

@@ -3,6 +3,9 @@ ExpandableSection 展开缩放
 
 ExpandableSection 组件以在 sectionHeader标题 下方或上方呈现展开的内容部分
 
+<image src='https://user-images.githubusercontent.com/66067296/137708253-1b6c2dfb-9c89-477a-a6ea-0c46120bf86d.gif' alt='ExpandableSection' style='zoom:33%;' />
+
+
 ### 基础示例
 
 <!--DemoStart--> 

packages/core/src/Flex/README.md

@@ -4,6 +4,11 @@ Flex Flex布局
 
 Flex 是 React Native CSS flex 布局的一个封装。
 
+
+<image src='https://user-images.githubusercontent.com/66067296/137708776-ad9d357f-9aad-4131-8bb1-408f4ae90a08.png' alt='Flex' style='zoom:33%;' />
+<image src='https://user-images.githubusercontent.com/66067296/137708793-79f69f8b-1d8d-4278-9aa9-6562ea6f1094.png' alt='Flex1' style='zoom:33%;' />
+<image src='https://user-images.githubusercontent.com/66067296/137708799-435612a4-0139-411e-b7fa-b9f4c63be07f.png' alt='Flex2' style='zoom:33%;' />
+
 ### 基础示例
 
 ```jsx

packages/core/src/Grid/README.md

@@ -3,6 +3,8 @@ Grid 宫格
 
 在水平和垂直方向，将布局切分成若干等大的区块，也可以使用 `List` 组件支持列显示的特性，展示宫格，同时支持下来刷新等特性。
 
+<image src='https://user-images.githubusercontent.com/66067296/137709398-3d7476dd-009d-4852-abed-69b3726c3a25.png' alt='Grid' style='zoom:33%;' />
+
 ### 基础示例
 
 引入本地图标 `require('./1.png')`。

packages/core/src/Icon/README.md

@@ -3,6 +3,8 @@ Icon 图标
 
 图标组件通过 [`react-native-svg`](https://github.com/react-native-community/react-native-svg) 支持 svg 图标，基于这一特性封装图标组件库，它不是基于字体文件封装的组件，相比字体图标组件易于扩展体积较小。预览[所有的图标](https://uiwjs.github.io/icons)。
 
+<image src='https://user-images.githubusercontent.com/66067296/137710056-d7fe4b94-7b98-4e18-a235-5a4e70beaa05.png' alt='Icon' style='zoom:33%;' />
+
 ### 基础示例
 
 ```js

website/src/pages/components/cardcollapse/index.gif

@@ -6,12 +6,6 @@ export default class Page extends Markdown {
     const md = await import('@uiw/react-native/lib/CardCollapse/README.md');
     // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
     importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    const result = md.default || md;
-    const index = result.indexOf('### 基础示例');
-    const abc =
-      result.substr(0, index) +
-      "\n<image src='./index.gif' alt='CardCollapse' style='zoom:33%;' />\n\n" +
-      result.substr(index);
-    return abc;
+    return md.default || md;
   };
 }

website/src/pages/components/cardcollapse/index.tsx

@@ -6,12 +6,6 @@ export default class Page extends Markdown {
     const md = await import('@uiw/react-native/lib/CheckBox/README.md');
     // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
     importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    const result = md.default || md;
-    const index = result.indexOf('### 基础示例');
-    const abc =
-      result.substr(0, index) +
-      "\n<image src='./index.png' alt='CheckBox' style='zoom:33%;' />\n\n" +
-      result.substr(index);
-    return abc;
+    return md.default || md;
   };
 }

website/src/pages/components/checkbox/index.png

@@ -6,12 +6,6 @@ export default class Page extends Markdown {
     const md = await import('@uiw/react-native/lib/Divider/README.md');
     // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
     importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    const result = md.default || md;
-    const index = result.indexOf('### 基础示例');
-    const abc =
-      result.substr(0, index) +
-      "\n<image src='./index.png' alt='Divider' style='zoom:33%;' />\n\n" +
-      result.substr(index);
-    return abc;
+    return md.default || md;
   };
 }

website/src/pages/components/checkbox/index.tsx

@@ -6,12 +6,6 @@ export default class Page extends Markdown {
     const md = await import('@uiw/react-native/lib/Drawer/README.md');
     // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
     importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    const result = md.default || md;
-    const index = result.indexOf('### 基础示例');
-    const abc =
-      result.substr(0, index) +
-      "\n<image src='./index.gif' alt='Drawer' style='zoom:33%;' />\n\n" +
-      result.substr(index);
-    return abc;
+    return md.default || md;
   };
 }

website/src/pages/components/divider/index.png

@@ -6,12 +6,6 @@ export default class Page extends Markdown {
     const md = await import('@uiw/react-native/lib/Ellipsis/README.md');
     // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
     importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    const result = md.default || md;
-    const index = result.indexOf('### 基础示例');
-    const abc =
-      result.substr(0, index) +
-      "\n<image src='./index.png' alt='Ellipsis' style='zoom:33%;' />\n\n" +
-      result.substr(index);
-    return abc;
+    return md.default || md;
   };
 }

website/src/pages/components/divider/index.tsx

@@ -6,13 +6,6 @@ export default class Page extends Markdown {
     const md = await import('@uiw/react-native/lib/Empty/README.md');
     // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
     importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    const result = md.default || md;
-    const index = result.indexOf('### 基础示例');
-    const abc =
-      result.substr(0, index) +
-      "\n<image src='./index.png' alt='Empty' style='zoom:33%;' />\n\n" +
-      result.substr(index);
-    console.log('abc: ', abc);
-    return abc;
+    return md.default || md;
   };
 }

website/src/pages/components/drawer/index.gif

@@ -6,12 +6,6 @@ export default class Page extends Markdown {
     const md = await import('@uiw/react-native/lib/ExpandableSection/README.md');
     // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
     importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    const result = md.default || md;
-    const index = result.indexOf('### 基础示例');
-    const abc =
-      result.substr(0, index) +
-      "\n<image src='./index.gif' alt='ExpandableSection' style='zoom:33%;' />\n\n" +
-      result.substr(index);
-    return abc;
+    return md.default || md;
   };
 }

website/src/pages/components/drawer/index.tsx

@@ -6,12 +6,6 @@ export default class Page extends Markdown {
     const md = await import('@uiw/react-native/lib/Flex/README.md');
     // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
     importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    const result = md.default || md;
-    const index = result.indexOf('### 基础示例');
-    const abc =
-      result.substr(0, index) +
-      "\n<image src='./index.png' alt='Flex' style='zoom:33%;' /> <image src='./index2.png' alt='Flex' style='zoom:33%;' /> <image src='./index3.png' alt='Flex' style='zoom:33%;' />\n\n" +
-      result.substr(index);
-    return abc;
+    return md.default || md;
   };
 }

website/src/pages/components/ellipsis/index.png

@@ -6,10 +6,6 @@ export default class Page extends Markdown {
     const md = await import('@uiw/react-native/lib/Grid/README.md');
     // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
     importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    const result = md.default || md;
-    const index = result.indexOf('### 基础示例');
-    const abc =
-      result.substr(0, index) + "\n<image src='./index.png' alt='Grid' style='zoom:33%;' />\n\n" + result.substr(index);
-    return abc;
+    return md.default || md;
   };
 }

website/src/pages/components/ellipsis/index.tsx

@@ -8,10 +8,6 @@ export default class Page extends Markdown {
     const md = await import('@uiw/react-native/lib/Icon/README.md');
     // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
     importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    const result = md.default || md;
-    const index = result.indexOf('### 基础示例');
-    const abc =
-      result.substr(0, index) + "\n<image src='./index.png' alt='Icon' style='zoom:33%;' />\n\n" + result.substr(index);
-    return abc;
+    return md.default || md;
   };
 }