doc: Update document example & Remove redundant code. (#222)

* 编写选项卡组件 * 类型名称请调整，添加组件文档在网站上展示 * #162修复报错 * fix:#162修复报错 * SpeedDial 悬浮标记 * 优化类型 * feat(ActionSheet): Add new component. * fix: ActionSheet 实例优化，组件优化 * feat(SearchInputBar): Add new component. * feat(Pagination): Add new component. * fix(Tooltip): 修复cloud弹出元素位置问题 * doc(Drawer): Update README.md * doc: Update README.md
uiwjs · Sep 19, 2021 · bbad461 · bbad461
1 parent 52a6298
commit bbad461
Show file tree

Hide file tree

Showing 20 changed files with 115 additions and 67 deletions.
diff --git a/packages/core/src/Avatar/README.md b/packages/core/src/Avatar/README.md
@@ -16,7 +16,6 @@ function Demo() {
     <View style={{ flexDirection: 'row' }}>
       <Avatar src="https://xx.images.com/xxx/icon.png" />
       <Avatar src={uri} />
-      <Avatar src={require('./1.png')} />
     </View>
   );
 }

diff --git a/packages/core/src/Drawer/README.md b/packages/core/src/Drawer/README.md
@@ -54,6 +54,75 @@ function Demo() {
 }
 ```
 
+## 注意事项 - 抽屉高度是页面有效高度
+```jsx
+import { Fragment } from 'react';
+import { View, Text, SafeAreaView } from 'react-native';
+import { Drawer, Button } from '@uiw/react-native';
+
+function Demo() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <Drawer
+        isOpen={visible}
+        onChange={(isOpen) => setVisible(isOpen)}
+      >
+        <View>
+          <Text>左边打开抽屉内容</Text>
+        </View>
+      </Drawer>
+      <Button onPress={() => setVisible(!visible)}>左边打开抽屉</Button>
+    </SafeAreaView>
+  );
+}
+```   
+## 抽屉覆盖全屏
+- 可查看 [react-native-root-siblings](https://www.npmjs.com/package/react-native-root-siblings) 文档
+```jsx
+// 在 App.js 文件中 
+import React from 'react';
+import {Provider} from 'react-redux';
+import {store} from './models';
+import {RootSiblingParent} from 'react-native-root-siblings';
+
+export default () => {
+  return (
+    <Provider store={store}>
+      <RootSiblingParent> 
+       {/* ...你的导航之类的组件 */}
+      </RootSiblingParent>
+    </Provider>
+  );
+};
+
+
+// 在使用组件页面
+import { Fragment } from 'react';
+import { View, Text, SafeAreaView } from 'react-native';
+import { Drawer, Button } from '@uiw/react-native';
+import {RootSiblingPortal} from 'react-native-root-siblings';
+
+function Demo() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <SafeAreaView>
+      <RootSiblingPortal>
+        <Drawer
+          isOpen={visible}
+          onChange={(isOpen) => setVisible(isOpen)}
+        >
+          {/* SafeAreaView 这样做是有必要的，因为手机时间是需要与内容分开的，除非你并不需要 */}
+          <SafeAreaView> 
+            <Text>左边打开抽屉内容</Text>
+          </SafeAreaView>
+        </Drawer>
+      </RootSiblingPortal>
+      <Button onPress={() => setVisible(!visible)}>左边打开抽屉</Button>
+    </SafeAreaView>
+  );
+}
+``` 
 ## props
 
 | 参数 | 说明 | 类型 | 默认值 |

diff --git a/packages/core/src/Ellipsis/README.md b/packages/core/src/Ellipsis/README.md
@@ -7,7 +7,6 @@ Ellipsis 超出省略
 
 ```jsx
 import { Fragment } from 'react';
-import { View, Text } from 'react-native';
 import { Ellipsis } from '@uiw/react-native';
 
 function Demo() {

diff --git a/packages/core/src/Empty/README.md b/packages/core/src/Empty/README.md
@@ -112,6 +112,7 @@ class Demo extends Component {
 <!--DemoStart--> 
 ```js
 import { Empty } from '@uiw/react-native';
+import {View, Text } from 'react-native';
 
 class Demo extends Component {
   render() {

diff --git a/packages/core/src/Input/README.md b/packages/core/src/Input/README.md
@@ -13,10 +13,10 @@ import { View, Input } from '@uiw/react-native';
 export default class BasicInputExample extends React.Component {
   render() {
     return <View>
-      <Input style={styles.input} onChange={(value) => {this.setState({value})}} value={this.state.value} />
-       <Input style={styles.input} extra="小数" />
-        <Input style={styles.input} error />
-         <Input style={styles.input} type="phone" />
+      <Input onChange={(value) => {this.setState({value})}} value={this.state.value} />
+      <Input extra="小数" />
+      <Input error />
+      <Input type="phone" />
     </View>
   }
 }

diff --git a/packages/core/src/Loader/README.md b/packages/core/src/Loader/README.md
@@ -26,14 +26,11 @@ function Demo() {
 
 <!--DemoStart--> 
 ```jsx
-import { View } from 'react-native';
 import { Button，Loader } from '@uiw/react-native';
 
 function Demo() {
   return (
-    <View style={{ minHeight: 60 }}>
-      <Loader color="red" />
-    </View>
+    <Loader color="red" />
   );
 }
 ```

diff --git a/packages/core/src/MaskLayer/README.md b/packages/core/src/MaskLayer/README.md
@@ -7,9 +7,9 @@ MaskLayer 遮罩层
 
 <!--DemoStart--> 
 ```jsx
-import React, { Component, Fragment } from 'react';
-import { View, Text, Alert, SafeAreaView } from 'react-native';
-import { Modal, Button, MaskLayer } from '@uiw/react-native';
+import { Fragment } from 'react';
+import { Text,  SafeAreaView } from 'react-native';
+import { Button, MaskLayer } from '@uiw/react-native';
 
 export default () => {
   const [visible, setVisible] = useState(true);
@@ -20,7 +20,9 @@ export default () => {
         onDismiss={() => {
           setVisible(false);
         }}>
+        <SafeAreaView>
           <Text style={{color: '#fff'}}>展示内容</Text>
+        </SafeAreaView>
       </MaskLayer>
       <Button
         onPress={() => {

diff --git a/packages/core/src/Modal/README.md b/packages/core/src/Modal/README.md
@@ -7,8 +7,8 @@ Modal 模态框
 
 <!--DemoStart--> 
 ```jsx
-import React, { Component, Fragment } from 'react';
-import { View, Text, Alert, SafeAreaView } from 'react-native';
+import { Component, Fragment } from 'react';
+import { View, Text, SafeAreaView } from 'react-native';
 import { Modal, Button } from '@uiw/react-native';
 
 export default class ButtonGroupView extends Component {

diff --git a/packages/core/src/Result/README.md b/packages/core/src/Result/README.md
@@ -7,7 +7,7 @@ Result 结果页
 
 ```jsx
 import { Text } from 'react-native';
-import { Result, Icon } from '@uiw/react-native';
+import { Result, Icon, Del } from '@uiw/react-native';
 
 function Demo() {
   return (

diff --git a/packages/core/src/SearchBar/README.md b/packages/core/src/SearchBar/README.md
@@ -4,7 +4,7 @@ SearchBar 模糊搜素组件
 ## 基础示例
 
 ```jsx
-import { Result, Icon } from '@uiw/react-native';
+import { SearchBar } from '@uiw/react-native';
 
 function Demo() {
   return (

diff --git a/packages/core/src/SelectCascader/README.md b/packages/core/src/SelectCascader/README.md
@@ -6,8 +6,7 @@ SelectCascader 级联选择
 ## 基础示例
 
 ```jsx
-import { Text } from 'react-native';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { SelectCascader } from '@uiw/react-native';
 
 

diff --git a/packages/core/src/Slider/README.md b/packages/core/src/Slider/README.md
@@ -9,9 +9,9 @@ Slider 滑块输入条
 ## 基础示例
 
 ```jsx
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Text } from 'react-native';
-import { Drawer } from '@uiw/react-native';
+import { Slider } from '@uiw/react-native';
 
 function Demo() {
   const [value, setValue] = useState(0.3);
@@ -30,8 +30,8 @@ function Demo() {
 ## 不显示滑块
 
 ```jsx
-import { Fragment } from 'react';
-import { Drawer } from '@uiw/react-native';
+import { Fragment,useState } from 'react';
+import { Slider } from '@uiw/react-native';
 
 function Demo() {
   const [value, setValue] = useState(0.3);
@@ -50,8 +50,8 @@ function Demo() {
 ## 设置步长
 
 ```jsx
-import { Fragment } from 'react';
-import { Drawer } from '@uiw/react-native';
+import { Fragment, useState } from 'react';
+import { Slider } from '@uiw/react-native';
 
 function Demo() {
   const [value, setValue] = useState(0.3);

diff --git a/packages/core/src/SpeedDial/README.md b/packages/core/src/SpeedDial/README.md
@@ -7,7 +7,8 @@ SpeedDial 悬浮标记组件按下时，浮动动作按钮可以以快速显示
 
 ```jsx
 import { Fragment } from 'react';
-import { SpeedDial } from '@uiw/react-native';
+import { SpeedDial, Icon } from '@uiw/react-native';
+import { Text } from '@uiw/react-native';
 
 function Demo() {
   return (
@@ -42,7 +43,7 @@ function Demo() {
 
 ```jsx
 import { Fragment } from 'react';
-import { Rating, Icon } from '@uiw/react-native';
+import { SpeedDial, Icon } from '@uiw/react-native';
 function Demo() {
   return (
     <Fragment>

diff --git a/packages/core/src/SwipeAction/README.md b/packages/core/src/SwipeAction/README.md
@@ -45,7 +45,7 @@ export default class BasicSwipeActionExample extends React.Component {
           onOpen={() => console.log('open')}
           onClose={() => console.log('close')}
         >
-          <View style={styles.view}>
+          <View>
             <Text>滑动</Text>
           </View>
       </SwipeAction>

diff --git a/packages/core/src/Switch/README.md b/packages/core/src/Switch/README.md
@@ -9,7 +9,7 @@ Switch 开关
 ## 基础示例
 
 ```jsx
-import { Spacing,Flex, Switch } from '@uiw/react-native';
+import { Switch } from '@uiw/react-native';
 
 function Demo() {
   return (
@@ -44,7 +44,7 @@ function Demo() {
 
 ```jsx
 import { useState } from 'react';
-import { Spacing,Flex, Switch } from '@uiw/react-native';
+import { Switch } from '@uiw/react-native';
 
 function Demo() {
   const [checked, setChecked] = useState(false);

diff --git a/packages/core/src/Tabs/README.md b/packages/core/src/Tabs/README.md
@@ -38,7 +38,7 @@ function Demo() {
 
 ```jsx
 import { Fragment } from 'react';
-import { Rating, Icon } from '@uiw/react-native';
+import { Tabs, Icon } from '@uiw/react-native';
 function Demo() {
   return (
     <Fragment>

diff --git a/packages/core/src/Tile/README.md b/packages/core/src/Tile/README.md
@@ -14,8 +14,7 @@ function Demo() {
   return (
     <Fragment>
        <Tile
-          imageSrc={require('../../image/tileBG.png')}
-          // imageSrc={{uri: 'https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg'}}
+          imageSrc={require('xxx.png')}
           imageProps={{resizeMode:'contain'}}
           containerStyle={{marginTop: 10}}
           imageContainerStyle={{backgroundColor:'#ccc'}}

diff --git a/packages/core/src/Tooltip/README.md b/packages/core/src/Tooltip/README.md
@@ -6,42 +6,36 @@ Tooltip 工具提示
 ## 基础示例
 
 ```jsx
-import { Fragment } from 'react';
 import { Tooltip } from '@uiw/react-native';
 
 
 function Demo() {
   return (
-    <Fragment>
-      <Tooltip title='我是一个文本'>
-        <Text style={styles.textStyle}>我是一个文本</Text>
-      </Tooltip>
-    </Fragment>
+    <Tooltip title='我是一个文本'>
+      <Text>我是一个文本</Text>
+    </Tooltip>
   );
 }
 ```
 
 ## 使用 自定义提示内容
 
 ```jsx
-import { Fragment } from 'react';
 import { Tooltip, Icon } from '@uiw/react-native';
 
 function Demo() {
   return (
-    <Fragment>
-      <Tooltip
-        backgroundColor="pink"
-        width={30}
-        height={30}
-        title={(<View>
-          <Text>我是一个苹果</Text>
-          <Icon name='apple' color="#fff" />
-      </View>)}
-      >
-        <Icon name='apple' color="red" />
-      </Tooltip>
-    </Fragment>
+    <Tooltip
+      backgroundColor="pink"
+      width={30}
+      height={30}
+      title={(<View>
+        <Text>我是一个苹果</Text>
+        <Icon name='apple' color="#fff" />
+    </View>)}
+    >
+      <Icon name='apple' color="red" />
+    </Tooltip>
   );
 }
 ```

diff --git a/packages/core/src/TransitionImage/README.md b/packages/core/src/TransitionImage/README.md
@@ -6,8 +6,9 @@ TransitionImage 图像
 ## 基础示例
 
 ```jsx
-import { Fragment, ActivityIndicator } from 'react';
+import { Fragment } from 'react';
 import { TransitionImage } from '@uiw/react-native';
+import {ActivityIndicator} from 'react-native';
 
 
 function Demo() {
@@ -34,7 +35,6 @@ function Demo() {
 
 ```ts
 import { ImageProps } from 'react-native';
-import { TransitionImage } from '@uiw/react-native';
 
 export interface TransitionImage extends ImageProps{
   /* 按下组件时的回调函数 */

diff --git a/packages/core/src/Typography/README.md b/packages/core/src/Typography/README.md
@@ -67,18 +67,6 @@ function Demo() {
 }
 ```
 
-## 段落
-
-```jsx
-import { P } from '@uiw/react-native';
-
-function Demo() {
-  return (
-    <P>这段文字加粗</P>
-  );
-}
-```
-
 ## 换行
 
 ```jsx