fix: 更改Divider分割线和ButtonGroup按钮组文档和添加文档实例

Author: hy

packages/core/src/ButtonGroup/README.md

@@ -3,13 +3,13 @@ ButtonGroup 按钮组
 
 用于一组按钮的排版展示。
 
-![](https://user-images.githubusercontent.com/57083007/137632086-8441bd1b-e8f9-4c15-828d-ad86310fdb72.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
-
 ### 基础示例
 
 <!--DemoStart--> 
-```jsx
-import { Button, ButtonGroup } from '@uiw/react-native';
+```jsx  mdx:preview
+import React,{ Component } from "react"
+import  Button  from '@uiw/react-native/lib/Button';
+import  ButtonGroup  from '@uiw/react-native/lib/ButtonGroup';
 
 class Demo extends Component {
   render() {
@@ -23,15 +23,19 @@ class Demo extends Component {
     )
   }
 }
+
+export default Demo
 ```
-<!--End-->
 
 ### 设置边框
 
 <!--DemoStart--> 
-```jsx
+```jsx  mdx:preview
+import React,{ Component } from "react"
 import { View } from 'react-native';
-import { Button, ButtonGroup } from '@uiw/react-native';
+import  Button  from '@uiw/react-native/lib/Button';
+import  ButtonGroup  from '@uiw/react-native/lib/ButtonGroup';
+import  Spacing  from '@uiw/react-native/lib/Spacing';
 
 class Demo extends Component {
   render() {
@@ -54,15 +58,21 @@ class Demo extends Component {
     )
   }
 }
+
+export default Demo
 ```
 <!--End-->
 
+
 ### 设置按钮组尺寸
 
 <!--DemoStart--> 
-```jsx
+```jsx  mdx:preview
+import React,{ Component } from "react"
 import { View } from 'react-native';
-import { Button, ButtonGroup } from '@uiw/react-native';
+import  Button  from '@uiw/react-native/lib/Button';
+import  ButtonGroup  from '@uiw/react-native/lib/ButtonGroup';
+import  Spacing  from '@uiw/react-native/lib/Spacing';
 
 class Demo extends Component {
   render() {
@@ -113,10 +123,11 @@ class Demo extends Component {
     )
   }
 }
+
+export default Demo
 ```
 <!--End-->
 
-
 ### Props
 
 集成继承 `Button` 组件自定义属性，外层包裹继承 [`Flex`] 组件。

packages/core/src/Divider/README.md

@@ -1,18 +1,17 @@
 Divider 分割线
 ---
 
-![](https://user-images.githubusercontent.com/66067296/140264880-2e3ad121-d86f-4625-8149-7bf452b348db.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
-
 区隔内容的分割线。
 
 ### 基础示例
 
-```jsx
-import { Fragment } from 'react';
+```jsx  mdx:preview
+import React,{Component, Fragment } from "react"
 import { View, Text } from 'react-native';
-import { Divider } from '@uiw/react-native';
+import  Divider  from '@uiw/react-native/lib/Divider';
 
-function Demo() {
+class Demo extends Component {
+  render() {
   return (
     <Fragment>
       <Text>分割线</Text>
@@ -22,17 +21,21 @@ function Demo() {
       <Text>分割线</Text>
     </Fragment>
   );
+  }
 }
+export default Demo
+
 ```
 
 ### 分割线标题位置
 
-```jsx
-import { Fragment } from 'react';
+```jsx  mdx:preview
+import React,{Component, Fragment } from "react"
 import { View, Text } from 'react-native';
-import { Divider } from '@uiw/react-native';
+import  Divider  from '@uiw/react-native/lib/Divider';
 
-function Demo() {
+class Demo extends Component {
+  render() {
   return (
     <Fragment>
       <Text>分割线</Text>
@@ -43,22 +46,30 @@ function Demo() {
       <Divider label="right" orientation="right" labelStyle={{ fontWeight: 'bold' }} />
     </Fragment>
   );
+  }
 }
+export default Demo
+
 ```
 
 ### 纵向分割线
 
-```jsx
+```jsx  mdx:preview
+import React,{Component} from "react"
 import { View, Text } from 'react-native';
-import { Divider } from '@uiw/react-native';
+import  Divider  from '@uiw/react-native/lib/Divider';
 
-function Demo() {
+class Demo extends Component {
+  render() {
   return (
-    <View style={{ height: 200 }}>
+   <View style={{ height: 200 }}>
       <Divider type="vertical" label="OR" />
     </View>
   );
+  }
 }
+export default Demo
+
 ```
 
 ### props