本项目已收到哔哩哔哩（bilibili）律师函，要求停止对 B 站 API 的调用及相关仿制行为。

为尊重知识产权及相关法律法规，本仓库即日起停止后续维护与更新，不再接受新的 Issue 和 Pull Request。

现有代码仅作学习参考保留，请勿将本项目用于任何商业或违法用途。

感谢所有支持过本项目的朋友。

components/DownloadSheet.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import {
   View,
   Text,
@@ -6,14 +6,19 @@ import {
   TouchableOpacity,
   Animated,
   StyleSheet,
+  ScrollView,
+  useWindowDimensions,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { useDownload } from "../hooks/useDownload";
 import { useTheme } from "../utils/theme";
+import { useSheetTransition } from "../utils/useSheetTransition";
 
 interface Props {
   visible: boolean;
   onClose: () => void;
+  /** Sheet 顶部对齐到屏幕的绝对 Y（一般是播放器底部） */
+  topOffset: number;
   bvid: string;
   cid: number;
   title: string;
@@ -24,6 +29,7 @@ interface Props {
 export function DownloadSheet({
   visible,
   onClose,
+  topOffset,
   bvid,
   cid,
   title,
@@ -32,148 +38,143 @@ export function DownloadSheet({
 }: Props) {
   const { tasks, startDownload, taskKey } = useDownload();
   const theme = useTheme();
-  const slideAnim = useRef(new Animated.Value(300)).current;
+  const { height } = useWindowDimensions();
+  const sheetH = Math.max(120, height - topOffset);
+  const { rendered, slideAnim } = useSheetTransition(visible, sheetH);
 
-  useEffect(() => {
-    Animated.timing(slideAnim, {
-      toValue: visible ? 0 : 300,
-      duration: 260,
-      useNativeDriver: true,
-    }).start();
-  }, [visible]);
-
-  if (qualities.length === 0) return null;
+  if (!rendered || qualities.length === 0) return null;
 
   return (
     <Modal
-      visible={visible}
+      visible
       transparent
       animationType="none"
+      statusBarTranslucent
       onRequestClose={onClose}
     >
-      <TouchableOpacity
-        style={styles.overlay}
-        activeOpacity={1}
-        onPress={onClose}
-      />
       <Animated.View
-        style={[styles.sheet, { backgroundColor: theme.sheetBg, transform: [{ translateY: slideAnim }] }]}
+        style={[
+          styles.sheet,
+          {
+            top: topOffset,
+            backgroundColor: theme.sheetBg,
+            transform: [{ translateY: slideAnim }],
+          },
+        ]}
       >
-        <View style={styles.header}>
+        <View style={[styles.header, { borderBottomColor: theme.modalBorder }]}>
           <Text style={[styles.headerTitle, { color: theme.modalText }]}>下载视频</Text>
-          <TouchableOpacity onPress={onClose} style={styles.closeBtn}>
-            <Ionicons name="close" size={20} color={theme.modalTextSub} />
+          <TouchableOpacity onPress={onClose} style={styles.closeBtn} hitSlop={8}>
+            <Ionicons name="close" size={22} color={theme.modalTextSub} />
           </TouchableOpacity>
         </View>
-        <View style={[styles.divider, { backgroundColor: theme.modalBorder }]} />
-        {qualities.map((q) => {
-          const key = taskKey(bvid, q.qn);
-          const task = tasks[key];
-          return (
-            <View key={q.qn} style={styles.row}>
-              <Text style={[styles.qualityLabel, { color: theme.modalText }]}>{q.desc}</Text>
-              <View style={styles.right}>
-                {!task && (
-                  <TouchableOpacity
-                    style={styles.downloadBtn}
-                    onPress={() =>
-                      startDownload(bvid, cid, q.qn, q.desc, title, cover)
-                    }
-                  >
-                    <Text style={styles.downloadBtnTxt}>下载</Text>
-                  </TouchableOpacity>
-                )}
-                {task?.status === "downloading" && (
-                  <View style={styles.progressWrap}>
-                    <View style={styles.progressTrack}>
-                      <View
-                        style={[
-                          styles.progressFill,
-                          {
-                            width: `${Math.round(task.progress * 100)}%` as any,
-                          },
-                        ]}
-                      />
-                    </View>
-                    <Text style={styles.progressTxt}>
-                      {Math.round(task.progress * 100)}%
-                    </Text>
-                  </View>
-                )}
-                {task?.status === "done" && (
-                  <View style={styles.doneRow}>
-                    <Ionicons
-                      name="checkmark-circle"
-                      size={16}
-                      color="#00AEEC"
-                    />
-                    <Text style={styles.doneTxt}>已下载</Text>
-                  </View>
-                )}
-                {task?.status === "error" && (
-                  <View style={styles.errorWrap}>
-                    {!!task.error && (
-                      <Text style={styles.errorMsg} numberOfLines={2}>
-                        {task.error}
-                      </Text>
-                    )}
+        <ScrollView
+          contentContainerStyle={styles.body}
+          showsVerticalScrollIndicator={false}
+        >
+          {qualities.map((q) => {
+            const key = taskKey(bvid, q.qn);
+            const task = tasks[key];
+            return (
+              <View
+                key={q.qn}
+                style={[styles.row, { borderBottomColor: theme.modalBorder }]}
+              >
+                <Text style={[styles.qualityLabel, { color: theme.modalText }]}>
+                  {q.desc}
+                </Text>
+                <View style={styles.right}>
+                  {!task && (
                     <TouchableOpacity
-                      style={styles.retryBtn}
+                      style={styles.downloadBtn}
                       onPress={() =>
                         startDownload(bvid, cid, q.qn, q.desc, title, cover)
                       }
                     >
-                      <Ionicons name="refresh" size={14} color="#f44" />
-                      <Text style={styles.retryTxt}>重试</Text>
+                      <Text style={styles.downloadBtnTxt}>下载</Text>
                     </TouchableOpacity>
-                  </View>
-                )}
+                  )}
+                  {task?.status === "downloading" && (
+                    <View style={styles.progressWrap}>
+                      <View style={styles.progressTrack}>
+                        <View
+                          style={[
+                            styles.progressFill,
+                            {
+                              width: `${Math.round(task.progress * 100)}%` as any,
+                            },
+                          ]}
+                        />
+                      </View>
+                      <Text style={[styles.progressTxt, { color: theme.modalTextSub }]}>
+                        {Math.round(task.progress * 100)}%
+                      </Text>
+                    </View>
+                  )}
+                  {task?.status === "done" && (
+                    <View style={styles.doneRow}>
+                      <Ionicons name="checkmark-circle" size={16} color="#00AEEC" />
+                      <Text style={styles.doneTxt}>已下载</Text>
+                    </View>
+                  )}
+                  {task?.status === "error" && (
+                    <View style={styles.errorWrap}>
+                      {!!task.error && (
+                        <Text style={styles.errorMsg} numberOfLines={2}>
+                          {task.error}
+                        </Text>
+                      )}
+                      <TouchableOpacity
+                        style={styles.retryBtn}
+                        onPress={() =>
+                          startDownload(bvid, cid, q.qn, q.desc, title, cover)
+                        }
+                      >
+                        <Ionicons name="refresh" size={14} color="#f44" />
+                        <Text style={styles.retryTxt}>重试</Text>
+                      </TouchableOpacity>
+                    </View>
+                  )}
+                </View>
               </View>
-            </View>
-          );
-        })}
-        <View style={styles.footer} />
+            );
+          })}
+        </ScrollView>
       </Animated.View>
     </Modal>
   );
 }
 
 const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    backgroundColor: "rgba(0,0,0,0.4)",
-  },
   sheet: {
     position: "absolute",
-    bottom: 0,
     left: 0,
     right: 0,
-    backgroundColor: "#fff",
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    paddingHorizontal: 20,
-    paddingTop: 16,
+    bottom: 0,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+    overflow: "hidden",
   },
   header: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    marginBottom: 12,
+    paddingHorizontal: 20,
+    paddingTop: 14,
+    paddingBottom: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
   },
-  headerTitle: { fontSize: 16, fontWeight: "700", color: "#212121" },
+  headerTitle: { fontSize: 16, fontWeight: "700" },
   closeBtn: { padding: 4 },
-  divider: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: "#eee",
-    marginBottom: 4,
-  },
+  body: { paddingHorizontal: 20, paddingBottom: 40 },
   row: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
     paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
   },
-  qualityLabel: { fontSize: 15, color: "#212121" },
+  qualityLabel: { fontSize: 15 },
   right: { flexDirection: "row", alignItems: "center" },
   downloadBtn: {
     backgroundColor: "#00AEEC",
@@ -191,12 +192,11 @@ const styles = StyleSheet.create({
     overflow: "hidden",
   },
   progressFill: { height: 4, backgroundColor: "#00AEEC", borderRadius: 2 },
-  progressTxt: { fontSize: 12, color: "#666", minWidth: 32 },
+  progressTxt: { fontSize: 12, minWidth: 32 },
   doneRow: { flexDirection: "row", alignItems: "center", gap: 4 },
   doneTxt: { fontSize: 13, color: "#00AEEC" },
   errorWrap: { alignItems: "flex-end", gap: 2 },
   errorMsg: { fontSize: 11, color: "#f44", maxWidth: 160, textAlign: "right" },
   retryBtn: { flexDirection: "row", alignItems: "center", gap: 4 },
   retryTxt: { fontSize: 13, color: "#f44" },
-  footer: { height: 24 },
 });