fix: 修改Flex和Table组件文档

Author: hy

packages/core/src/Flex/README.md

@@ -4,17 +4,13 @@ Flex Flex布局
 
 Flex 是 React Native CSS flex 布局的一个封装。
 
-![](https://user-images.githubusercontent.com/66067296/137708776-ad9d357f-9aad-4131-8bb1-408f4ae90a08.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
-![](https://user-images.githubusercontent.com/66067296/137708793-79f69f8b-1d8d-4278-9aa9-6562ea6f1094.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
-![](https://user-images.githubusercontent.com/66067296/137708799-435612a4-0139-411e-b7fa-b9f4c63be07f.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
-
 ### 基础示例
 
-```jsx
-import { Fragment } from 'react';
+```jsx  mdx:preview
+import React,{ Fragment } from 'react';
 import { Flex, Button } from '@uiw/react-native';
 
-function Demo() {
+const Demo = () => {
   return (
     <Fragment>
       <Flex>
@@ -31,41 +27,56 @@ function Demo() {
     </Fragment>
   );
 }
+
+export default Demo
 ```
 
 ### 对齐方式
 
-```jsx
-import { Fragment } from 'react';
-import { Flex, Button } from '@uiw/react-native';
-
-const Circle = (props: any) => {
-  const size = props.size || 20;
-  const style = {
-    borderRadius: size / 2,
-    backgroundColor: 'red',
-    width: size,
-    height: size,
-    margin: 1,
-  };
-  return <View style={style} />;
-};
-
-function Demo() {
+```jsx  mdx:preview
+import React,{ Fragment } from 'react';
+import  {Flex, Button, Spacing, Icon } from '@uiw/react-native';
+import {View, Text} from 'react-native';
+const Demo = () => {
   return (
     <Fragment>
       <Flex justify="start">
-        <Circle /> <Circle /> <Circle /> <Circle /> <Circle />
+          <Button>警告</Button>
+          <Button>警告</Button>
+          <Button>主要</Button>
+          <Button>警告</Button>
       </Flex>
+      <Spacing />
       <Flex justify="center">
-        <Circle /> <Circle /> <Circle /> <Circle /> <Circle />
+      <Button  color="#fff">
+        <Icon name="apple" size={17} />
+        <Text> apple</Text>
+      </Button>
+      <Button  color="#fff">
+        <Icon name="menu-fold" size={17} />
+        <Text> menu-fold</Text>
+      </Button>
+      <Button  color="#ffc107">
+        <Icon name="warning" size={17} />
+        <Text> warning</Text>
+      </Button>
+      <Button  type="danger">
+        <Icon name="warning" fill="#fff" size={17} />
+        <Text> warning</Text>
+      </Button>
       </Flex>
+      <Spacing />
       <Flex justify="end">
-        <Circle /> <Circle /> <Circle /> <Circle /> <Circle />
+           <Button>警告</Button>
+          <Button>警告</Button>
+          <Button>主要</Button>
+          <Button>警告</Button>
       </Flex>
     </Fragment>
   );
 }
+export default Demo
+
 ```
 
 ### Props

packages/core/src/Table/README.md

@@ -1,14 +1,14 @@
 Table 表格
 ---
-
-![](https://user-images.githubusercontent.com/57083007/146733861-7c491a0b-d44d-41d2-94f4-6e7db5271cb0.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
-
+一个非常好用的Table表格 😄
 ### 基础示例
 
-```jsx
-import { Table } from '@uiw/react-native';
+```jsx  mdx:preview
+import React from 'react';
+import  {Table, Button } from '@uiw/react-native';
+import {View} from 'react-native';
 
-function Demo() {
+const Demo = () => {
   return (
      <Table
         columns={[
@@ -31,17 +31,15 @@ function Demo() {
             title: '备注',
             dataIndex: 'remark',
             ellipsis: true,
-            style: { width: 100 },
+            style: { width: 400 },
           },
           {
             title: '操作',
             dataIndex: 'id',
-            style: { width: 90 },
+            style: { width: 50 },
             render: () => {
               return (
-                <TouchableHighlight  onPress={() => { }}>
-                  <Text style={{ color: '#888' }}>查看</Text>
-                </TouchableHighlight>
+                    <Button size="small">详情</Button>
               );
             },
           },
@@ -56,6 +54,8 @@ function Demo() {
       />
   );
 }
+export default Demo
+
 ```
 
 ### props