如何使用 react-native-popup-menu 在自定义渲染器组件中创建关闭动画？

Question

我正在使用 react-native-popup-menu 并创建了我自己的 renderer 组件。它是一个功能组件，所以简而言之它看起来像这样：

const ContextMenuRenderer = ({ children, layouts, ...otherProps }) => {
  return (
    <Animated.View
      {...otherProps}
      onLayout={handleViewLayout}
      style={[styles.viewStyle, viewAnimations]}
    >
      {children}
    </Animated.View>
  );
}

viewAnimations里面有开场动画，代码比较大但是可以在this snack.

中看到

docs 说“为了处理异步关闭动画，渲染器可以实现 close() 菜单关闭前调用的方法。关闭方法必须 return Promise."

我阅读了 ContextMenu code，它是一个 class 组件并将 close() 实现为：

close() {
  return new Promise(resolve => {
    Animated.timing(this.state.scaleAnim, {
      duration: CLOSE_ANIM_DURATION,
      toValue: 0,
      easing: Easing.in(Easing.cubic),
      useNativeDriver: USE_NATIVE_DRIVER,
    }).start(resolve);
  });
}

我试图在我的函数组件中实现类似的东西，但代码没有执行。我认为这行不通，但我该怎么做才能在关闭时创建动画？我想做一个淡出动画。

function close() {
  console.log('close'); // It isn't logged
  return new Promise((resolve) => {
    console.log('resolve close');
  });
}

Answer 1

为了让您的渲染器开始关闭动画，RN 弹出方法通过 ref.

调用命令式方法 close

最安全的方法（就图书馆也使用和证明的而言）是使用 class 组件（正如您已经找到的那样）。

另一种选择可能是将挂钩 useImperativeHandle 与 forwardRef 一起使用。像

function FancyRenderer(props, ref) {
  useImperativeHandle(ref, () => ({
    close: () => {
      return new Promise(...);
    }
  }));
  return <View>;
}
FancyRenderer = forwardRef(FancyRenderer);

我记得我们正在尝试以某种方式检查我们是否可以首先获得 ref，所以我不确定您是否会像在钩子之前编码的那样工作，我们从未尝试过那样。在这种情况下可能需要小的 PR。

如何使用 react-native-popup-menu 在自定义渲染器组件中创建关闭动画？

How to create a close animation in a custom renderer component using react-native-popup-menu?

react-native

react-native-popup-menu