Question

正如你通过代码看到的，它非常短。实现这个 SlideMenu，我们仅需要如下 5 个现有的 React Native 组件。

- LayoutAnimation：用于完成 center view 的拖动。

- PanResponder：处理用户拖动。

- StyleSheet：设置正确的尺寸和坐标。

- View：为 leftview 与 center view 创建容器。

- Dimensions：获得屏幕尺寸。

有 center view 和 leftview 两个容器，leftview 绝对定位在下面，不能移动，center view 定位在上面。向右拖动 center view 可以看到 leftview, leftview 可以是菜单或者其他什么组件，并没有特别限制。

this.offset 的值是当 center view 开始拖动时相对于左边的坐标值，而 this.left 是 center view 拖动后基于 this.offset 的位移值。

以下关键代码能够保证只有当横向拖动大于竖向拖动时，center view 才可以开始移动。

onMoveShouldSetPanResponder: (evt, gestureState) => {
  return Math.abs(gestureState.dx) > Math.abs(gestureState.dy)
          && Math.abs(gestureState.dx) > 10
},

因此，你可以在 center view 放一个 scroll view 或者 list view，它们的滚动与滑动菜单互不干扰。最后，当用户滑动打开屏幕宽度的 1/4 以上时，抬起手指后其余的部分将自动打开，当用户滑动关闭了屏幕宽度的一半以上时，抬起手指后其余部分将自动关闭。