代码演示
上边抽屉
import { Drawer, Utils } from 'tuya-panel-kit';
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';
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';
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';
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 | 抽屉是否打开 | boolean | false |
| children | 自定义子组件 | ReactNode | null |
| maskStyle | 遮罩样式 | StyleProp | null |
| drawerStyle | 抽屉样式 | StyleProp | null |
| style | 最外层容器 | StyleProp | null |
| placement | 抽屉出现方向 | "left" | "right" | "top" | "bottom" | 'left' |
| onMaskPress | 点击遮罩回调 | () => void | null |
| onStateChange | 抽屉状态回调 | (visible?: boolean) => void | null |
| width | 抽屉的宽度 | number | winWidth / 2 |
| height | 抽屉的高度 | number | winHeight |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
| hasMask | 抽屉弹出是否伴随遮罩 | boolean | true |
| animationConfig | 动画配置 | { easing?: (...args: any[]) => any; duration?: number; delay?: number; isInteraction?: boolean; } | { easing: Easing.linear, duration: 400, delay: 0, isInteraction: true } |