react-native-drawer抽屉使用

RN项目开发中做筛选功能时遇到了需要用到抽屉的地方，使用了react-native-drawer这一插件，这是成果图: react-native-drawer抽屉使用
使用这个插件分为以下几个步骤:

安装插件依赖包:npm install –save react-native-drawer
在页面中引入组件:`import Drawer from ‘react-native-drawer’
使用组件:
`
type:抽屉展示形式，分为三种：displace,overlay,static，效果可以自己尝试一下；
content：展示的内容，一般开发中这里放一个抽屉中展示内容的封装组件;
disabled: 是否开启开关;
open: 如果为true将触发抽屉打开，如果为false将触发关闭;
openDrawerOffset: 定义打开抽屉时的右边距;
closedDrawerOffset: 定义关闭抽屉时的左手边距;
styles: 抽屉视图，主视图，drawerOverlay和mainOverlay容器视图的样式;
onOpen : 抽屉进入打开状态后将立即调用；
onOpenStart ：在打开的动画开始时触发的回调;
onClose : 抽屉进入关闭状态后将立即调用;
onCloseStart : 在关闭动画开始时触发的回调;
captureGestures:如果为true，将捕获平移蒙版内的所有手势。如果“open”将仅在抽屉打开时捕获;
acceptDoubleTap: (true/false)双击时切换抽屉;
acceptTap: (true/false)发生任何轻击时切换抽屉;
acceptPan: (true/false)允许抽屉平移（触摸拖动）。设置为false可有效禁用抽屉，同时仍允许编程控制;
tapToClose: 与acceptTap相同，但仅适用于close;
negotiatePan: 如果为true，则尝试仅处理水平滑动，使其适合使用ScrollView;
panThreshold: （数字）触发抽屉打开/关闭必须行进的屏幕宽度的比例；
panOpenMask：（数字）在开始全开动作时有效的屏幕宽度比率。如果为null->默认为max(.05, closedDrawerOffset);
panCloseMask: （数字）对于开始全屏关闭操作有效的屏幕宽度比率。如果为null->默认为max(.05, openDrawerOffset)
initializeOpen: （true/false）在抽屉打开时进行初始化；
side：抽屉应该在哪一侧；
useInteractionManager：（true/false）如果为true，则将为打开/关闭动画运行InteractionManager；
elevation:（数字）使用Android的基础海拔API设置抽屉的海拔

react-native-drawer抽屉使用

相关推荐