I wanted some help on how to modify this code so that I can have this react-native-bottomsheet slide up and down with touch gestures. I figure out how to do it with buttons. I am using @gorhom/bottom-sheet, "react-native-reanimated": "2.17.0", "react-native-gesture-handler": "2.9.0", "react-native": "0.70.5", in my package.json. This is some of the code I'm using.

我想要一些关于如何修改这段代码的帮助，这样我就可以用触摸手势上下滑动这个反应本机底片。我想出了怎么用纽扣来做。在我的Package.json中，我使用了@Gorhom/Bottom-Sheet，“reaction-ative-relive”：“2.17.0”，“action-ative-Handure-Handle”：“2.9.0”，“act-ative”：“0.70.5”。这是我正在使用的一些代码。

    import React, { useState, useCallback, useRef, useMemo } from 'react';
    import { View, StyleSheet, Image, TouchableOpacity, Modal, Dimensions, Text, ScrollView, Button } from 'react-native';
    import { SafeAreaView } from 'react-native-safe-area-context';
    import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
    import { useNavigation, useRoute } from '@react-navigation/core';
    import NavBar, { navBarIcons } from '../NavBarComponents/NavBar';
    import { BottomSheetModal, BottomSheetScrollView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
    import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";

    export const Profile = () => {

    const sheetRef = useRef(null);
    const handleSheetChange = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  const handleSnapPress = useCallback((index) => {
    sheetRef.current?.snapToIndex(index);
  }, []);
  const handleClosePress = useCallback(() => {
    sheetRef.current?.close();
  }, []);



  // render
  const renderItem = useCallback(() => (
    <ScrollView contentContainerStyle={styles.whiteBoxContent}>
    <View style={styles.infoContainer}>
      <Text style={styles.name}>{card.name},</Text>
      <Text style={styles.age}>{card.age}</Text>
      <View style={styles.ratingContainer}>
        <MaterialIcons name="star-rate" size={36} color="#5285F4" style={styles.starIcon} />
        {roundedRate && <Text style={styles.showRating}>{roundedRate}</Text>}
      </View>
    </View>
    </ScrollView>
   ), [card]);

  const handleImagePress = () => {
    setImageModalVisible(true);
  };

  const closeImageModal = () => {
    setImageModalVisible(false);
  };

  const closeBottomSheet = () => {
    setBottomSheetVisible(false);
  };

  const openBottomSheet = () => {
    setBottomSheetVisible(true);
  };


       return (
    
       <View style={styles.container}>
                  {/*<Button title="Snap To 90%" onPress={() => handleSnapPress(2)} />
                  <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} />
                  <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} />
        

<Button title="Close" onPress={() => handleClosePress()} />*/}
          <BottomSheet
            ref={sheetRef}
            index={1}
            snapPoints={snapPoints}
            onChange={handleSheetChange}
          >

                <BottomSheetView style={styles.contentContainer}>
                  {/*{data.map(renderItem)}*/}
                  {renderItem()}
                </BottomSheetView>
              </BottomSheet>
            </View>
       );
};