React-Native 动画手风琴/抽屉/下拉/可折叠卡

Question

我想实现一个动画手风琴列表/抽屉/下拉菜单/可折叠卡。

动画应该是高性能的并且看起来像这样：

Answer 1

经过大量搜索，我找到了很多库。但我想在没有任何库的情况下实现它。此外，一些教程展示了如何构建一个，但它们的性能不佳。

最后我就是这样实现的。完整的零食代码在这里：https://snack.expo.dev/@vipulchandra04/a85348

我将isOpen（无论菜单打开还是关闭）存储在state. 然后在按下按钮时更改该状态。我正在使用LayoutAnimationAPI 来React-Native动画列表的打开和关闭。LayoutAnimation本地运行动画，因此它是高性能的。

const Accordion = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleOpen = () => {
    setIsOpen(value => !value);
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  }

  return (
    <>
      <TouchableOpacity onPress={toggleOpen} activeOpacity={0.6}>
        {title}
      </TouchableOpacity>
      <View style={[styles.list, !isOpen ? styles.hidden : undefined]}>
        {children}
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  hidden: {
    height: 0,
  },
  list: {
    overflow: 'hidden'
  },
});