Skip to content

Commit

Permalink
fix:修复抽屉弹出内容层级问题 (#631)
Browse files Browse the repository at this point in the history
  • Loading branch information
SunLxy authored Jan 10, 2024
1 parent 4922aec commit 0bf1dd8
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 34 deletions.
57 changes: 41 additions & 16 deletions example/examples/src/routes/Drawer/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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} />
Expand Down
37 changes: 19 additions & 18 deletions packages/core/src/Drawer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={[
Expand All @@ -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>
);
}
Expand Down

0 comments on commit 0bf1dd8

Please sign in to comment.