代码之家 › 专栏 › 技术社区 › Rafael Tavares

如何使用本机弹出菜单在自定义渲染器组件中创建关闭动画?

react-native-popup-menu react-native

0

Rafael Tavares · 技术社区 · 5 年前

我用的是 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() 方法,该方法在菜单关闭之前调用。必须返回close方法 Promise

ContextMenu code ,它是一个类组件并实现 关闭() 作为:

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');
  });
}

0 回复 | 直到 5 年前

1

sodik 5 年前

为了允许渲染器开始关闭动画,RN popup方法调用命令式方法 close 通过参考。

最安全的方法(从术语上来说,它也被库使用和证明)是为此使用类组件(正如您已经发现的那样)。

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

我记得我们在想办法看看能不能拿到 ref 首先,我不确定你是否会像钩子之前那样工作,我们从来没有这样尝试过。在这种情况下,可能需要小的公关。