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

Author: SunLxy

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} />

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>
  );
 }