react native Bottom Sheet 使用

React Native 的 BottomSheet 是一个非常有用的组件，它允许你创建从屏幕底部弹出的可滑动视图，常用于展示附加信息、选项面板或模态对话框。以下是使用 React Native 底部抽屉（Bottom Sheet）的基本步骤：

1. 安装依赖：首先需要安装 `react-native-reanimated` 和 `react-native-gesture-handler` 来支持动画和手势处理。可以使用 npm 或 yarn 进行安装：

   npm install react-native-reanimated react-native-gesture-handler@latest

然后，在项目配置文件 (如 AndroidManifest.xml) 中添加权限：

   <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

2. 导入库和组件：在你的组件中导入必要的库和组件：

   import { View, StyleSheet, TouchableOpacity } from 'react-native';
   import { PanGestureHandler, BottomSheet } from 'react-native-gesture-handler';
   import Animated from 'react-native-reanimated';

3. 创建 BottomSheet 组件：

   const styles = StyleSheet.create({
     bottomSheet: {
       backgroundColor: 'white',
       height: 0,
       padding: 24,
       borderRadius: 8,
     },
   });

   function MyBottomSheet() {
     const [sheetHeight, setSheetHeight] = useState(Animated.Value(0));

     const onPanGestureEnd = () => {
       if (sheetHeight.value > 50) {
         setSheetHeight(new Animated.Value(-200));
       } else {
         setSheetHeight(new Animated.Value(0));
       }
     };

     return (
       <View style={styles.container}>
         {/* 主体内容 */}
         <TouchableOpacity
           onPress={() => setSheetHeight(sheetHeight.value - 200)}
         >
           {/* 拖动开启 BottomSheet */}
         </TouchableOpacity>
         <PanGestureHandler onHandlerStateChange={(event) => {
           if (event.state === 'active') {
             sheetHeight.setValue(0);
           }
         }}>
           <BottomSheet
             ref={ref => (bottomSheetRef = ref)}
             animatedValue={sheetHeight}
             panGestureEnabled={true}
             onGestureEnd={onPanGestureEnd}
             sheetStyle={{
               height: sheetHeight.interpolate({
                 inputRange: [0, -200],
                 outputRange: [0, 200], // 自定义最大高度
               }),
             }}
           />
         </PanGestureHandler>
       </View>
     );
   }

4. 使用 `<MyBottomSheet />` 在需要的地方嵌套这个组件。