react-native-drawer抽屉使用

  • 安装插件依赖包:npm install –save react-native-drawer
  • 在页面中引入组件:`import Drawer from ‘react-native-drawer’
  • 使用组件:react-native-drawer抽屉使用_第1张图片
    `
  • 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,前端,react,react,native,react.js,javascript)