Drawer 抽屉组件

代码演示

上边抽屉

import { Drawer, Utils } from 'tuya-panel-kit';
// import Drawer from 'tuya-panel-animation-drawer';
const { viewWidth, convertX: cx } = Utils.RatioUtils;
const [state, setState] = React.useState({
visible: false,
placement: 'top',
});
<Drawer
width={winWidth}
height={winHeight / 2}
hasMask={false}
placement={state.placement}
visible={state.visible}
onMaskPress={() => {
setState({ visible: false, placement: state.placement });
}}
onStateChange={state => {
console.log(state);
}}
>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ fontSize: 24 }}>我没有遮罩</Text>
</View>
</Drawer>

右边抽屉

import { Drawer, Utils } from 'tuya-panel-kit';
// import Drawer from 'tuya-panel-animation-drawer';
const { viewWidth, convertX: cx } = Utils.RatioUtils;
const [state, setState] = React.useState({
visible: false,
placement: 'right',
});
<Drawer
width={winWidth / 2}
height={winHeight}
hasMask={true}
placement={state.placement}
visible={state.visible}
onMaskPress={() => {
setState({ visible: false, placement: state.placement });
}}
onStateChange={state => {
console.log(state);
}}
>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ fontSize: 24 }}>我有遮罩</Text>
<TouchableOpacity
style={{
backgroundColor: '#fff',
width: 88,
height: 32,
marginTop: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 12,
zIndex: 10,
}}
onPress={() => {
setState({ visible: false, placement: state.placement });
}}
>
<Text> Click Me</Text>
</TouchableOpacity>
</View>
</Drawer>

下边抽屉

import { Drawer, Utils } from 'tuya-panel-kit';
// import Drawer from 'tuya-panel-animation-drawer';
const { viewWidth, convertX: cx } = Utils.RatioUtils;
const [state, setState] = React.useState({
visible: false,
placement: 'bottom',
});
<Drawer
width={winWidth}
height={winHeight / 2}
hasMask={false}
placement={state.placement}
visible={state.visible}
onMaskPress={() => {
setState({ visible: false, placement: state.placement });
}}
onStateChange={state => {
console.log(state);
}}
>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ fontSize: 24 }}>我没有遮罩</Text>
</View>
</Drawer>

左边抽屉

import { Drawer, Utils } from 'tuya-panel-kit';
// import Drawer from 'tuya-panel-animation-drawer';
const { viewWidth, convertX: cx } = Utils.RatioUtils;
const [state, setState] = React.useState({
visible: false,
placement: 'left',
});
<Drawer
width={winWidth / 2}
height={winHeight}
hasMask={true}
placement={state.placement}
visible={state.visible}
onMaskPress={() => {
setState({ visible: false, placement: state.placement });
}}
onStateChange={state => {
console.log(state);
}}
>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ fontSize: 24 }}>我有遮罩</Text>
<TouchableOpacity
style={{
backgroundColor: '#fff',
width: 88,
height: 32,
marginTop: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 12,
zIndex: 10,
}}
onPress={() => {
setState({ visible: false, placement: state.placement });
}}
>
<Text> Click Me</Text>
</TouchableOpacity>
</View>
</Drawer>

API

Drawer

属性名描述类型默认值
visible抽屉是否打开booleanfalse
children自定义子组件ReactNodenull
maskStyle遮罩样式StylePropnull
drawerStyle抽屉样式StylePropnull
style最外层容器StylePropnull
placement抽屉出现方向"left" | "right" | "top" | "bottom"'left'
onMaskPress点击遮罩回调() => voidnull
onStateChange抽屉状态回调(visible?: boolean) => voidnull
width抽屉的宽度numberwinWidth / 2
height抽屉的高度numberwinHeight
maskClosable点击蒙层是否允许关闭booleantrue
hasMask抽屉弹出是否伴随遮罩booleantrue
animationConfig动画配置{ easing?: (...args: any[]) => any; duration?: number; delay?: number; isInteraction?: boolean; }{ easing: Easing.linear, duration: 400, delay: 0, isInteraction: true }
tuya02:55