@@ -54,6 +54,75 @@ function Demo() {
54
54
}
55
55
```
56
56
57
+ ## 注意事项 - 抽屉高度是页面有效高度
58
+ ``` jsx
59
+ import { Fragment } from ' react' ;
60
+ import { View , Text , SafeAreaView } from ' react-native' ;
61
+ import { Drawer , Button } from ' @uiw/react-native' ;
62
+
63
+ function Demo () {
64
+ const [visible , setVisible ] = useState (false );
65
+ return (
66
+ < SafeAreaView style= {{flex: 1 }}>
67
+ < Drawer
68
+ isOpen= {visible}
69
+ onChange= {(isOpen ) => setVisible (isOpen)}
70
+ >
71
+ < View>
72
+ < Text > 左边打开抽屉内容< / Text >
73
+ < / View>
74
+ < / Drawer>
75
+ < Button onPress= {() => setVisible (! visible)}> 左边打开抽屉< / Button>
76
+ < / SafeAreaView>
77
+ );
78
+ }
79
+ ```
80
+ ## 抽屉覆盖全屏
81
+ - 可查看 [ react-native-root-siblings] ( https://www.npmjs.com/package/react-native-root-siblings ) 文档
82
+ ``` jsx
83
+ // 在 App.js 文件中
84
+ import React from ' react' ;
85
+ import {Provider } from ' react-redux' ;
86
+ import {store } from ' ./models' ;
87
+ import {RootSiblingParent } from ' react-native-root-siblings' ;
88
+
89
+ export default () => {
90
+ return (
91
+ < Provider store= {store}>
92
+ < RootSiblingParent>
93
+ {/* ...你的导航之类的组件 */ }
94
+ < / RootSiblingParent>
95
+ < / Provider>
96
+ );
97
+ };
98
+
99
+
100
+ // 在使用组件页面
101
+ import { Fragment } from ' react' ;
102
+ import { View , Text , SafeAreaView } from ' react-native' ;
103
+ import { Drawer , Button } from ' @uiw/react-native' ;
104
+ import {RootSiblingPortal } from ' react-native-root-siblings' ;
105
+
106
+ function Demo () {
107
+ const [visible , setVisible ] = useState (false );
108
+ return (
109
+ < SafeAreaView>
110
+ < RootSiblingPortal>
111
+ < Drawer
112
+ isOpen= {visible}
113
+ onChange= {(isOpen ) => setVisible (isOpen)}
114
+ >
115
+ {/* SafeAreaView 这样做是有必要的,因为手机时间是需要与内容分开的,除非你并不需要 */ }
116
+ < SafeAreaView>
117
+ < Text > 左边打开抽屉内容< / Text >
118
+ < / SafeAreaView>
119
+ < / Drawer>
120
+ < / RootSiblingPortal>
121
+ < Button onPress= {() => setVisible (! visible)}> 左边打开抽屉< / Button>
122
+ < / SafeAreaView>
123
+ );
124
+ }
125
+ ```
57
126
## props
58
127
59
128
| 参数 | 说明 | 类型 | 默认值 |
0 commit comments