Question

我的应用程序中有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

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

1 个答案: