doc: NoticeBar文档修改

Author: ChenlingasMx

packages/core/src/NoticeBar/README.md

@@ -3,19 +3,17 @@ NoticeBar 通告栏
 
 在导航栏下方，一般用作系统提醒、活动提醒等通知。
 
-![](https://user-images.githubusercontent.com/66067296/139399394-1eb887bc-6726-43a0-a158-22a25ebf9350.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
-
 ### 基础示例
 
-<!--DemoStart--> 
-```jsx
+```jsx mdx:preview
 import React from 'react';
-import {  NoticeBar, Spacing } from '@uiw/react-native';
+import { Image,View,Text } from 'react-native'
+import NoticeBar from '@uiw/react-native/lib/NoticeBar';
+import Spacing from '@uiw/react-native/lib/Spacing';
 
 const NoticeBarExample = () => {
   const customIcon = (
     <Image
-      // tslint:disable-next-line:jsx-no-multiline-js
       source={{
         uri: 'https://zos.alipayobjects.com/rmsportal/bRnouywfdRsCcLU.png',
       }}
@@ -69,15 +67,14 @@ const NoticeBarExample = () => {
 }
 export default NoticeBarExample;
 ```
-<!--End-->
 
 ### Props
 
 属性 | 说明 | 类型 | 默认值
 ----|-----|------|------
 | mode    | 提示类型，可选 `closable`,`link`   | String |  ''  |
 | icon    | 在开始位置设置图标  |  ReactNode | `<Icon type={require('./trips.svg')} size="xxs" />`|
-| onPress | 点击关闭或者操作区域的回调函数        | (): void |   |
+| onPress | 点击关闭或者操作区域的回调函数        | () => void |   |
 | marqueeProps | marquee 参数 | Object | `{loop: false, leading: 500, trailing: 800, fps: 40, style: {}}`  |
 | action | 用于替换操作 icon 的文案 | ReactElement | |
 | style    | 用于设置通告栏样式  | ViewStyle |  |

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

@@ -1,11 +1,5 @@
-import Markdown, { importAll } from '../../../component/Markdown';
+import Preview from 'src/component/Preview';
+import md from '@uiw/react-native/lib/NoticeBar/README.md';
 
-export default class Page extends Markdown {
-  path = '/packages/core/src/NoticeBar/README.md';
-  getMarkdown = async () => {
-    const md = await import('@uiw/react-native/lib/NoticeBar/README.md');
-    // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
-    importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
-    return md.default || md;
-  };
-}
+const DEMO = () => <Preview {...md} />;
+export default DEMO;