react-native-popup-menu如何实现从底部向上滑出的弹出动画

你可以通过自定义 MenuOptions 的 renderOptionsContainer 属性搭配 React Native 内置的 Animated 动画实现底部向上滑出效果，具体修改方案如下：

首先导入所需依赖：

import { Animated, Easing } from 'react-native';

自定义滑入动画容器组件：

const SlideUpMenuContainer = ({ children, style }) => {
  const opacity = React.useRef(new Animated.Value(0)).current;
  // 初始偏移量可根据菜单实际高度调整
  const translateY = React.useRef(new Animated.Value(120)).current;

  React.useEffect(() => {
    Animated.parallel([
      Animated.timing(opacity, {
        toValue: 1,
        duration: 250,
        easing: Easing.out(Easing.quad),
        useNativeDriver: true,
      }),
      Animated.timing(translateY, {
        toValue: 0,
        duration: 250,
        easing: Easing.out(Easing.quad),
        useNativeDriver: true,
      })
    ]).start();
  }, [opacity, translateY]);

  return (
    <Animated.View
      style={[
        style,
        {
          opacity,
          transform: [{ translateY }],
        },
      ]}
    >
      {children}
    </Animated.View>
  );
};

修改你原有代码的 MenuOptions 配置，调整定位样式并传入自定义动画容器：

<MenuProvider>
    <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
    <Text>Hello world!</Text>
    <Menu >
        <MenuTrigger text='Select action'/>
        <MenuOptions 
          // 菜单固定在屏幕底部，宽度撑满
          style={{
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            margin: 0,
          }}
          // 绑定自定义动画容器
          renderOptionsContainer={(options, containerStyle) => (
            <SlideUpMenuContainer style={containerStyle}>
              {options}
            </SlideUpMenuContainer>
          )}
          // 可选：调整菜单样式适配底部弹出的交互习惯
          customStyles={{
            optionsContainer: {
              paddingVertical: 16,
              borderRadius: 12,
              borderBottomLeftRadius: 0,
              borderBottomRightRadius: 0,
            }
          }}
        >
            <MenuOption onSelect={() => alert(`Save`)} text='Save' />
            <MenuOption onSelect={() => alert(`Delete`)} >
            <Text style={{color: 'red'}}>Delete</Text>
            </MenuOption>
            <MenuOption onSelect={() => alert(`Not called`)} disabled={true} text='Disabled' />
        </MenuOptions>
    </Menu>
    </View>
</MenuProvider>

如果需要调整动画速度，直接修改 duration 参数的数值即可，数值越小动画越快。如果需要添加关闭时的下滑动画，可以监听菜单的关闭状态，在关闭前触发反向动画再卸载组件。

内容的提问来源于stack exchange，提问作者Copernove