fix:修复抽屉弹出内容层级问题 (#631)

uiwjs · Jan 10, 2024 · 0bf1dd8 · 0bf1dd8
1 parent 4922aec
commit 0bf1dd8
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 34 deletions.
diff --git a/example/examples/src/routes/Drawer/index.tsx b/example/examples/src/routes/Drawer/index.tsx
@@ -1,6 +1,7 @@
 import React, {useState, Fragment} from 'react';
 import {View, Text} from 'react-native';
-import {Button, Drawer, Spacing, WingBlank} from '@uiw/react-native';
+import {RootSiblingPortal} from 'react-native-root-siblings';
+import {Button, Drawer, Spacing, WingBlank, Input} from '@uiw/react-native';
 import Layout, {Container} from '../../Layout';
 import {ComProps} from '../../routes';
 const {Header, Body, Footer} = Layout;
@@ -14,42 +15,66 @@ export default function DrawerView({route}: DrawerViewProps) {
   const [visible2, setVisible2] = useState(false);
   const [visible3, setVisible3] = useState(false);
   const [visible4, setVisible4] = useState(false);
+  const [value, setValue] = useState('');
+
   return (
     <Fragment>
-      <Drawer isOpen={visible2} placement="right" onChange={(isOpen: boolean) => setVisible2(isOpen)} drawerBackgroundColor="red">
-        <View>
-          <Text style={{color: '#ccc'}}>右边打开抽屉内容</Text>
-        </View>
-      </Drawer>
       <Drawer
         isOpen={visible}
+        drawerBackgroundColor="red"
         onChange={(isOpen: boolean) => {
           setVisible(isOpen);
         }}>
         <View>
           <Text style={{color: '#ccc'}}>左边打开抽屉内容</Text>
         </View>
       </Drawer>
-      <Drawer
-        isOpen={visible3}
-        placement="top"
-        onChange={(isOpen: boolean) => {
-          setVisible3(isOpen);
-        }}>
-        <View>
-          <Text style={{color: '#ccc'}}>上边打开抽屉内容</Text>
-        </View>
-      </Drawer>
+
+      <RootSiblingPortal>
+        <Drawer
+          drawerWidth={200}
+          drawerHeight={200}
+          isOpen={visible2}
+          placement="right"
+          onChange={(isOpen: boolean) => setVisible2(isOpen)}
+          drawerBackgroundColor="red">
+          <View>
+            <Input
+              onChangeText={(value: string) => {
+                setValue(value);
+              }}
+              value={value}
+            />
+            <Text style={{color: '#ccc'}}>右边打开抽屉内容</Text>
+          </View>
+        </Drawer>
+      </RootSiblingPortal>
+
+      <RootSiblingPortal>
+        <Drawer
+          isOpen={visible3}
+          placement="top"
+          drawerBackgroundColor="red"
+          onChange={(isOpen: boolean) => {
+            setVisible3(isOpen);
+          }}>
+          <View>
+            <Text style={{color: '#ccc'}}>上边打开抽屉内容</Text>
+          </View>
+        </Drawer>
+      </RootSiblingPortal>
       <Drawer
         isOpen={visible4}
         placement="bottom"
+        drawerBackgroundColor="red"
         onChange={isOpen => {
           setVisible4(isOpen);
         }}>
         <View>
           <Text style={{color: '#ccc'}}>下边打开抽屉内容</Text>
         </View>
       </Drawer>
+
       <Container>
         <Layout>
           <Header title={title} description={description} />

diff --git a/packages/core/src/Drawer/index.tsx b/packages/core/src/Drawer/index.tsx
@@ -152,23 +152,6 @@ export default function Drawer(props: DrawerProps) {
 
   return (
     <Fragment>
-      <Animated.View
-        style={[
-          styles.drawer,
-          dynamicDrawerStyles,
-          style,
-          // eslint-disable-next-line
-          {
-            [changeStyle]: isOpen ? (isTopOrBottom ? drawerHeight : drawerWidth) : 0,
-            transform: [
-              { translateX: drawerValue.x }, // x轴移动
-              { translateY: drawerValue.y }, // y轴移动
-            ],
-          },
-        ]}
-      >
-        {props.children}
-      </Animated.View>
       <Animated.View
         pointerEvents={isOpen ? 'auto' : 'none'}
         style={[
@@ -187,13 +170,31 @@ export default function Drawer(props: DrawerProps) {
             styles.positionFull,
             // eslint-disable-next-line
             {
-              zIndex: 3003,
+              zIndex: zIndexValue,
               position: 'absolute',
             },
           ]}
           onPress={onOverlayClick}
         />
       </Animated.View>
+      <Animated.View
+        style={[
+          styles.drawer,
+          dynamicDrawerStyles,
+          style,
+          // eslint-disable-next-line
+          {
+            zIndex: zIndexValue + 1,
+            [changeStyle]: isOpen ? (isTopOrBottom ? drawerHeight : drawerWidth) : 0,
+            transform: [
+              { translateX: drawerValue.x }, // x轴移动
+              { translateY: drawerValue.y }, // y轴移动
+            ],
+          },
+        ]}
+      >
+        {props.children}
+      </Animated.View>
     </Fragment>
   );
 }