如何在React-Native中创建Action-Sheet/Bottom-Sheet样式的抽屉？

npm install react-native-actionsheet react-native-animations --save

import React, { useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import ActionSheet from 'react-native-actionsheet';
import { createAnimation } from 'react-native-animations';

const DrawerExample = () => {
  const [isDrawerVisible, setIsDrawerVisible] = useState(false);

  // 显示抽屉
  const showDrawer = () => {
    setIsDrawerVisible(true);
  };

  // 隐藏抽屉
  const hideDrawer = () => {
    setIsDrawerVisible(false);
  };

  return (
    <View>
      <TouchableOpacity onPress={showDrawer}>
        <Text>Show Drawer</Text>
      </TouchableOpacity>

      <ActionSheet
        visible={isDrawerVisible}
        onCancel={hideDrawer}
        title={'Options'}
        options={['Option 1', 'Option 2', 'Cancel']}
        cancelButtonIndex={2}
        onPress={(index) => {
          if (index === 0) {
            // 处理选项1的逻辑
          } else if (index === 1) {
            // 处理选项2的逻辑
          }
          hideDrawer();
        }}
      />
    </View>
  );
};

export default DrawerExample;

const DrawerExample = () => {
  // ...

  const showDrawer = () => {
    setIsDrawerVisible(true);
  };

  const hideDrawer = () => {
    setIsDrawerVisible(false);
  };

  const slideInAnimation = createAnimation({
    from: { translateY: 300 },
    to: { translateY: 0 },
    duration: 200,
  });

  const slideOutAnimation = createAnimation({
    from: { translateY: 0 },
    to: { translateY: 300 },
    duration: 200,
  });

  return (
    <View>
      <TouchableOpacity onPress={showDrawer}>
        <Text>Show Drawer</Text>
      </TouchableOpacity>

      <ActionSheet
        visible={isDrawerVisible}
        onCancel={hideDrawer}
        title={'Options'}
        options={['Option 1', 'Option 2', 'Cancel']}
        cancelButtonIndex={2}
        onPress={(index) => {
          if (index === 0) {
            // 处理选项1的逻辑
          } else if (index === 1) {
            // 处理选项2的逻辑
          }
          hideDrawer();
        }}
        containerStyle={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          backgroundColor: 'white',
          ...slideInAnimation,
        }}
        overlayStyle={{
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
        }}
        onAnimationStart={() => {
          if (isDrawerVisible) {
            slideInAnimation.start();
          } else {
            slideOutAnimation.start();
          }
        }}
      />
    </View>
  );
};

export default DrawerExample;