react-native - 自定义打开/关闭抽屉动画

Question

我的应用程序中有抽屉导航器。我已经成功地将屏幕之间的默认（从右到左）动画更改为淡入/淡出。

但是我找不到一种方法来更改从右向左滑动的 react-navigation Drawer 的默认动画。我需要它来淡入/淡出。

我正在使用自定义抽屉组件并navigation.openDrawer()打开和navigation.closeDrawer()关闭抽屉。

Answer 1

您可以将抽屉动画设置为不同的动画，但不能设置为fade动画。

drawerType - Type of the drawer. It determines how the drawer looks and animates.

- front: Traditional drawer which covers the screen with a overlay behind it.
- back: The drawer is revealed behind the screen on swipe.
- slide: Both the screen and the drawer slide on swipe to reveal the drawer.

或者，您可以为抽屉内的内容设置动画：

const CustomDrawerContentComponent = props => {
  const translateX = props.drawerOpenProgress.interpolate({
    inputRange: [0, 1],
    outputRange: [-100, 0],
  });

  return (
    <Animated.View style={{ transform: [{ translateX }] }}>
      {/* ... drawer contents */}
    </Animated.View>
  );
};

https://reactnavigation.org/docs/en/drawer-navigator.html