1

app/index.tsx

@@ -118,6 +118,7 @@ export default function HomeScreen() {
         }
         onEndReached={() => load()}
         onEndReachedThreshold={0.5}
+        extraData={visibleBigKey}
         viewabilityConfig={VIEWABILITY_CONFIG}
         onViewableItemsChanged={onViewableItemsChangedRef}
         ListFooterComponent={

app/video/[bvid].tsx

@@ -1,30 +1,46 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import {
-  View, Text, ScrollView, StyleSheet,
-  TouchableOpacity, Image, ActivityIndicator
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { useLocalSearchParams, useRouter } from 'expo-router';
-import { Ionicons } from '@expo/vector-icons';
-import { VideoPlayer } from '../../components/VideoPlayer';
-import { CommentItem } from '../../components/CommentItem';
-import { getDanmaku } from '../../services/bilibili';
-import { DanmakuItem } from '../../services/types';
-import DanmakuList from '../../components/DanmakuList';
-import { useVideoDetail } from '../../hooks/useVideoDetail';
-import { useComments } from '../../hooks/useComments';
-import { useVideoStore } from '../../store/videoStore';
-import { formatCount } from '../../utils/format';
-import { proxyImageUrl } from '../../utils/imageUrl';
+  View,
+  Text,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  ActivityIndicator,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { VideoPlayer } from "../../components/VideoPlayer";
+import { CommentItem } from "../../components/CommentItem";
+import { getDanmaku } from "../../services/bilibili";
+import { DanmakuItem } from "../../services/types";
+import DanmakuList from "../../components/DanmakuList";
+import { useVideoDetail } from "../../hooks/useVideoDetail";
+import { useComments } from "../../hooks/useComments";
+import { useVideoStore } from "../../store/videoStore";
+import { formatCount } from "../../utils/format";
+import { proxyImageUrl } from "../../utils/imageUrl";
 
-type Tab = 'intro' | 'comments';
+type Tab = "intro" | "comments";
 
 export default function VideoDetailScreen() {
   const { bvid } = useLocalSearchParams<{ bvid: string }>();
   const router = useRouter();
-  const { video, playData, loading: videoLoading, qualities, currentQn, changeQuality } = useVideoDetail(bvid as string);
-  const { comments, loading: cmtLoading, load: loadComments } = useComments(video?.aid ?? 0);
-  const [tab, setTab] = useState<Tab>('comments');
+  const {
+    video,
+    playData,
+    loading: videoLoading,
+    qualities,
+    currentQn,
+    changeQuality,
+  } = useVideoDetail(bvid as string);
+  const {
+    comments,
+    loading: cmtLoading,
+    load: loadComments,
+  } = useComments(video?.aid ?? 0);
+  const [tab, setTab] = useState<Tab>("comments");
   const [danmakus, setDanmakus] = useState<DanmakuItem[]>([]);
   const [currentTime, setCurrentTime] = useState(0);
   const [showDanmakuList, setShowDanmakuList] = useState(true);
@@ -56,7 +72,9 @@ export default function VideoDetailScreen() {
         <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
           <Ionicons name="chevron-back" size={24} color="#212121" />
         </TouchableOpacity>
-        <Text style={styles.topTitle} numberOfLines={1}>{video?.title ?? '视频详情'}</Text>
+        <Text style={styles.topTitle} numberOfLines={1}>
+          {video?.title ?? "视频详情"}
+        </Text>
         <TouchableOpacity style={styles.miniBtn} onPress={handleMiniPlayer}>
           <Ionicons name="copy-outline" size={22} color="#212121" />
         </TouchableOpacity>
@@ -73,12 +91,11 @@ export default function VideoDetailScreen() {
         danmakus={danmakus}
         onTimeUpdate={setCurrentTime}
       />
-
       <DanmakuList
         danmakus={danmakus}
         currentTime={currentTime}
         visible={showDanmakuList}
-        onToggle={() => setShowDanmakuList(v => !v)}
+        onToggle={() => setShowDanmakuList((v) => !v)}
       />
 
       <ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}>
@@ -97,7 +114,10 @@ export default function VideoDetailScreen() {
             </View>
 
             <View style={styles.upRow}>
-              <Image source={{ uri: proxyImageUrl(video.owner.face) }} style={styles.avatar} />
+              <Image
+                source={{ uri: proxyImageUrl(video.owner.face) }}
+                style={styles.avatar}
+              />
               <Text style={styles.upName}>{video.owner.name}</Text>
               <TouchableOpacity style={styles.followBtn}>
                 <Text style={styles.followTxt}>+ 关注</Text>
@@ -105,28 +125,51 @@ export default function VideoDetailScreen() {
             </View>
 
             <View style={styles.tabBar}>
-              <TouchableOpacity style={styles.tabItem} onPress={() => setTab('intro')}>
-                <Text style={[styles.tabLabel, tab === 'intro' && styles.tabActive]}>简介</Text>
-                {tab === 'intro' && <View style={styles.tabUnderline} />}
-              </TouchableOpacity>
-              <TouchableOpacity style={styles.tabItem} onPress={() => setTab('comments')}>
-                <Text style={[styles.tabLabel, tab === 'comments' && styles.tabActive]}>
-                  评论 {video.stat.reply > 0 ? formatCount(video.stat.reply) : ''}
+              <TouchableOpacity
+                style={styles.tabItem}
+                onPress={() => setTab("intro")}
+              >
+                <Text
+                  style={[styles.tabLabel, tab === "intro" && styles.tabActive]}
+                >
+                  简介
                 </Text>
-                {tab === 'comments' && <View style={styles.tabUnderline} />}
+                {tab === "intro" && <View style={styles.tabUnderline} />}
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={styles.tabItem}
+                onPress={() => setTab("comments")}
+              >
+                <Text
+                  style={[
+                    styles.tabLabel,
+                    tab === "comments" && styles.tabActive,
+                  ]}
+                >
+                  评论{" "}
+                  {video.stat.reply > 0 ? formatCount(video.stat.reply) : ""}
+                </Text>
+                {tab === "comments" && <View style={styles.tabUnderline} />}
               </TouchableOpacity>
             </View>
 
-            {tab === 'intro' ? (
+            {tab === "intro" ? (
               <View style={styles.descBox}>
-                <Text style={styles.descText}>{video.desc || '暂无简介'}</Text>
+                <Text style={styles.descText}>{video.desc || "暂无简介"}</Text>
               </View>
             ) : (
               <>
-                {comments.map(c => <CommentItem key={c.rpid} item={c} />)}
-                {cmtLoading && <ActivityIndicator style={styles.loader} color="#00AEEC" />}
+                {comments.map((c) => (
+                  <CommentItem key={c.rpid} item={c} />
+                ))}
+                {cmtLoading && (
+                  <ActivityIndicator style={styles.loader} color="#00AEEC" />
+                )}
                 {!cmtLoading && comments.length > 0 && (
-                  <TouchableOpacity style={styles.loadMore} onPress={loadComments}>
+                  <TouchableOpacity
+                    style={styles.loadMore}
+                    onPress={loadComments}
+                  >
                     <Text style={styles.loadMoreTxt}>加载更多评论</Text>
                   </TouchableOpacity>
                 )}
@@ -152,31 +195,78 @@ function StatBadge({ icon, count }: { icon: string; count: number }) {
 }
 
 const styles = StyleSheet.create({
-  safe: { flex: 1, backgroundColor: '#fff' },
-  topBar: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 8, paddingVertical: 8, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#eee' },
+  safe: { flex: 1, backgroundColor: "#fff" },
+  topBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#eee",
+  },
   backBtn: { padding: 4 },
-  topTitle: { flex: 1, fontSize: 15, fontWeight: '600', marginLeft: 4, color: '#212121' },
+  topTitle: {
+    flex: 1,
+    fontSize: 15,
+    fontWeight: "600",
+    marginLeft: 4,
+    color: "#212121",
+  },
   miniBtn: { padding: 4 },
   scroll: { flex: 1 },
   loader: { marginVertical: 30 },
   titleSection: { padding: 14 },
-  title: { fontSize: 16, fontWeight: '600', color: '#212121', lineHeight: 22, marginBottom: 8 },
-  statsRow: { flexDirection: 'row', gap: 16 },
-  stat: { flexDirection: 'row', alignItems: 'center', gap: 3 },
-  statText: { fontSize: 12, color: '#999' },
-  upRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 14, paddingBottom: 12, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#f0f0f0' },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#212121",
+    lineHeight: 22,
+    marginBottom: 8,
+  },
+  statsRow: { flexDirection: "row", gap: 16 },
+  stat: { flexDirection: "row", alignItems: "center", gap: 3 },
+  statText: { fontSize: 12, color: "#999" },
+  upRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 14,
+    paddingBottom: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#f0f0f0",
+  },
   avatar: { width: 38, height: 38, borderRadius: 19, marginRight: 10 },
-  upName: { flex: 1, fontSize: 14, color: '#212121', fontWeight: '500' },
-  followBtn: { backgroundColor: '#00AEEC', paddingHorizontal: 14, paddingVertical: 5, borderRadius: 14 },
-  followTxt: { color: '#fff', fontSize: 12, fontWeight: '600' },
-  tabBar: { flexDirection: 'row', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#eee' },
-  tabItem: { flex: 1, alignItems: 'center', paddingVertical: 12, position: 'relative' },
-  tabLabel: { fontSize: 14, color: '#999' },
-  tabActive: { color: '#00AEEC', fontWeight: '700' },
-  tabUnderline: { position: 'absolute', bottom: 0, width: 24, height: 2, backgroundColor: '#00AEEC', borderRadius: 1 },
+  upName: { flex: 1, fontSize: 14, color: "#212121", fontWeight: "500" },
+  followBtn: {
+    backgroundColor: "#00AEEC",
+    paddingHorizontal: 14,
+    paddingVertical: 5,
+    borderRadius: 14,
+  },
+  followTxt: { color: "#fff", fontSize: 12, fontWeight: "600" },
+  tabBar: {
+    flexDirection: "row",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#eee",
+  },
+  tabItem: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: 12,
+    position: "relative",
+  },
+  tabLabel: { fontSize: 14, color: "#999" },
+  tabActive: { color: "#00AEEC", fontWeight: "700" },
+  tabUnderline: {
+    position: "absolute",
+    bottom: 0,
+    width: 24,
+    height: 2,
+    backgroundColor: "#00AEEC",
+    borderRadius: 1,
+  },
   descBox: { padding: 16 },
-  descText: { fontSize: 14, color: '#555', lineHeight: 22 },
-  loadMore: { alignItems: 'center', padding: 16 },
-  loadMoreTxt: { color: '#00AEEC', fontSize: 13 },
-  emptyTxt: { textAlign: 'center', color: '#bbb', padding: 30 },
+  descText: { fontSize: 14, color: "#555", lineHeight: 22 },
+  loadMore: { alignItems: "center", padding: 16 },
+  loadMoreTxt: { color: "#00AEEC", fontSize: 13 },
+  emptyTxt: { textAlign: "center", color: "#bbb", padding: 30 },
 });