diff --git a/packages/core/src/Avatar/README.md b/packages/core/src/Avatar/README.md index e894f99a5..254c41355 100644 --- a/packages/core/src/Avatar/README.md +++ b/packages/core/src/Avatar/README.md @@ -16,7 +16,6 @@ function Demo() { - ); } diff --git a/packages/core/src/Drawer/README.md b/packages/core/src/Drawer/README.md index f7f579d9b..5f12de164 100644 --- 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 ( + + setVisible(isOpen)} + > + + 左边打开抽屉内容 + + + + + ); +} +``` +## 抽屉覆盖全屏 +- 可查看 [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 ( + + + {/* ...你的导航之类的组件 */} + + + ); +}; + + +// 在使用组件页面 +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 ( + + + setVisible(isOpen)} + > + {/* SafeAreaView 这样做是有必要的,因为手机时间是需要与内容分开的,除非你并不需要 */} + + 左边打开抽屉内容 + + + + + + ); +} +``` ## props | 参数 | 说明 | 类型 | 默认值 | diff --git a/packages/core/src/Ellipsis/README.md b/packages/core/src/Ellipsis/README.md index f0d9595be..14b14a45a 100644 --- 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 index 67299e424..d8be5b95a 100644 --- a/packages/core/src/Empty/README.md +++ b/packages/core/src/Empty/README.md @@ -112,6 +112,7 @@ class Demo extends Component { ```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 index 7826ead28..011b61701 100644 --- 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 - {this.setState({value})}} value={this.state.value} /> - - - + {this.setState({value})}} value={this.state.value} /> + + + } } diff --git a/packages/core/src/Loader/README.md b/packages/core/src/Loader/README.md index 8a1af54a2..de9b787f4 100644 --- a/packages/core/src/Loader/README.md +++ b/packages/core/src/Loader/README.md @@ -26,14 +26,11 @@ function Demo() { ```jsx -import { View } from 'react-native'; import { Button,Loader } from '@uiw/react-native'; function Demo() { return ( - - - + ); } ``` diff --git a/packages/core/src/MaskLayer/README.md b/packages/core/src/MaskLayer/README.md index 1600fd111..90864ed97 100644 --- a/packages/core/src/MaskLayer/README.md +++ b/packages/core/src/MaskLayer/README.md @@ -7,9 +7,9 @@ MaskLayer 遮罩层 ```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); }}> + 展示内容 +