自定义 open/close 抽屉动画

Question

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

但是我找不到更改从右向左滑动的react-navigation Drawer 的默认动画的方法。我需要它 fadeIn/fadeOut 来代替。

我正在使用自定义抽屉组件，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

自定义 open/close 抽屉动画

Custom open/close Drawer animation

react-native

react-navigation

react-navigation-drawer