feat: UP主页/视频详情页 UI 优化 + 多处交互修复

- creator: 头部模糊背景 + 滚动渐变 topBar，移除 removeClippedSubviews 修复列表抖动
- video: 简介 2 行折叠（onTextLayout 探测真实行数），tname 分区标签，统计数据前移到 UP 主行
- VideoCard/LiveCard: title 设 minHeight 解决两列卡片底部对齐
- LoginModal: 二维码过期支持原地重试，无需关闭重开
- search: 初始 loading 显示 indicator，搜索/选建议时自动收起键盘
- 统一图片组件为 expo-image：LiveCard / FollowedLiveStrip / downloads
- types: VideoItem 补 tname / pubdate 字段

components/FollowedLiveStrip.tsx

@@ -4,9 +4,9 @@ import {
   Text,
   ScrollView,
   TouchableOpacity,
-  Image,
   StyleSheet,
 } from "react-native";
+import { Image } from "expo-image";
 import { useRouter } from "expo-router";
 import { useAuthStore } from "../store/authStore";
 import { getFollowedLiveRooms } from "../services/bilibili";
@@ -53,6 +53,8 @@ export function FollowedLiveStrip() {
             <Image
               source={{ uri: proxyImageUrl(room.face) }}
               style={[styles.avatar, { backgroundColor: theme.card }]}
+              contentFit="cover"
+              recyclingKey={String(room.roomid)}
             />
             <Text
               style={[styles.name, { color: theme.text }]}

components/LiveCard.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import {
   View,
   Text,
-  Image,
   TouchableOpacity,
   StyleSheet,
   Dimensions,
 } from "react-native";
+import { Image } from "expo-image";
 import { Ionicons } from "@expo/vector-icons";
 import { LivePulse } from "./LivePulse";
 import type { LiveRoom } from "../services/types";
@@ -41,15 +41,14 @@ export const LiveCard = React.memo(function LiveCard({
       <View style={styles.thumbContainer}>
         <Image
           source={{ uri: proxyImageUrl(item.cover) }}
-          style={[
-            styles.thumb,
-            { width: cardWidth, height: cardWidth * 0.5625, backgroundColor: theme.card },
-          ]}
-          resizeMode="cover"
+          style={[styles.thumb, { width: cardWidth, height: cardWidth * 0.5625, backgroundColor: theme.card }]}
+          contentFit="cover"
+          recyclingKey={String(item.roomid)}
+          transition={200}
         />
         <View style={styles.liveBadge}>
           {isLivePulse && <LivePulse />}
-          <Text style={styles.liveBadgeText}>直播中</Text>
+          <Text style={styles.liveBadgeText}>直播</Text>
         </View>
         <View style={styles.meta}>
           <Ionicons name="people" size={11} color="#fff" />
@@ -67,8 +66,13 @@ export const LiveCard = React.memo(function LiveCard({
           <Image
             source={{ uri: proxyImageUrl(item.face) }}
             style={styles.avatar}
+            contentFit="cover"
+            recyclingKey={`face-${item.roomid}`}
           />
-          <Text style={[styles.owner, { color: theme.textSub }]} numberOfLines={1}>
+          <Text
+            style={[styles.owner, { color: theme.textSub }]}
+            numberOfLines={1}
+          >
             {item.uname}
           </Text>
         </View>
@@ -103,32 +107,35 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 2,
   },
-  liveBadgeText: { color: "#fff", fontSize: 10, fontWeight: "400" },
+  liveBadgeText: { color: "#fff", fontSize: 9, fontWeight: "400" },
   meta: {
     position: "absolute",
     bottom: 4,
     left: 4,
-    paddingHorizontal: 4,
     borderRadius: 5,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
     backgroundColor: "rgba(0,0,0,0.6)",
     flexDirection: "row",
     alignItems: "center",
     gap: 2,
   },
-  metaText: { fontSize: 10, color: "#fff" },
+  metaText: { fontSize: 9, color: "#fff" },
   areaBadge: {
     position: "absolute",
     bottom: 4,
     right: 4,
     borderRadius: 5,
-    paddingHorizontal: 4,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
     backgroundColor: "rgba(0,0,0,0.6)",
   },
-  areaText: { color: "#fff", fontSize: 10 },
+  areaText: { color: "#fff", fontSize: 9 },
   info: { padding: 6 },
   title: {
     fontSize: 12,
     lineHeight: 17,
+    minHeight: 40,
     color: "#212121",
     marginBottom: 4,
   },

components/LoginModal.tsx

@@ -50,8 +50,7 @@ export function LoginModal({ visible, onClose }: Props) {
     }
   }, [visible]);
 
-  useEffect(() => {
-    if (!visible) return;
+  function initQRCode() {
     setStatus("loading");
     setQrData(null);
     setQrKey(null);
@@ -62,7 +61,11 @@ export function LoginModal({ visible, onClose }: Props) {
         setStatus("waiting");
       })
       .catch(() => setStatus("error"));
+  }
 
+  useEffect(() => {
+    if (!visible) return;
+    initQRCode();
     return () => {
       if (pollRef.current) clearInterval(pollRef.current);
     };
@@ -187,7 +190,13 @@ export function LoginModal({ visible, onClose }: Props) {
             </>
           )}
           {status === "error" && (
-            <Text style={[styles.hint, { color: theme.modalTextSub }]}>二维码已过期，请关闭重试</Text>
+            <View style={styles.errorBox}>
+              <Text style={[styles.hint, { color: theme.modalTextSub }]}>二维码已过期</Text>
+              <TouchableOpacity style={styles.retryBtn} onPress={initQRCode}>
+                <Ionicons name="refresh" size={14} color="#fff" />
+                <Text style={styles.retryTxt}>重新获取</Text>
+              </TouchableOpacity>
+            </View>
           )}
           <TouchableOpacity style={styles.closeBtn} onPress={onClose}>
             <Text style={styles.closeTxt}>关闭</Text>
@@ -230,7 +239,19 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  hint: { fontSize: 13, color: "#666", marginBottom: 20 },
+  hint: { fontSize: 13, color: "#666", marginBottom: 12 },
+  errorBox: { alignItems: "center", marginBottom: 8 },
+  retryBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: "#00AEEC",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    marginBottom: 12,
+  },
+  retryTxt: { fontSize: 13, color: "#fff", fontWeight: "600" },
   closeBtn: { padding: 12 },
   closeTxt: { fontSize: 14, color: "#00AEEC" },
 });

components/VideoCard.tsx

@@ -22,8 +22,11 @@ interface Props {
   onPress: () => void;
 }
 
-export const VideoCard = React.memo(function VideoCard({ item, onPress }: Props) {
-  const trafficSaving = useSettingsStore(s => s.trafficSaving);
+export const VideoCard = React.memo(function VideoCard({
+  item,
+  onPress,
+}: Props) {
+  const trafficSaving = useSettingsStore((s) => s.trafficSaving);
   const theme = useTheme();
   return (
     <TouchableOpacity
@@ -33,7 +36,9 @@ export const VideoCard = React.memo(function VideoCard({ item, onPress }: Props)
     >
       <View style={styles.thumbContainer}>
         <Image
-          source={{ uri: coverImageUrl(item.pic, trafficSaving ? 'normal' : 'hd') }}
+          source={{
+            uri: coverImageUrl(item.pic, trafficSaving ? "normal" : "hd"),
+          }}
           style={[styles.thumb, { backgroundColor: theme.card }]}
           contentFit="cover"
           transition={200}
@@ -55,7 +60,10 @@ export const VideoCard = React.memo(function VideoCard({ item, onPress }: Props)
         <Text style={[styles.title, { color: theme.text }]} numberOfLines={2}>
           {item.title}
         </Text>
-        <Text style={[styles.owner, { color: theme.textSub }]} numberOfLines={1}>
+        <Text
+          style={[styles.owner, { color: theme.textSub }]}
+          numberOfLines={1}
+        >
           {item.owner?.name ?? ""}
         </Text>
       </View>
@@ -82,15 +90,16 @@ const styles = StyleSheet.create({
     bottom: 4,
     right: 4,
     borderRadius: 5,
-    paddingHorizontal: 4,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
     backgroundColor: "rgba(0,0,0,0.6)",
-    paddingVertical: 0,
   },
-  durationText: { color: "#fff", fontSize: 10 },
+  durationText: { color: "#fff", fontSize: 9 },
   info: { padding: 6 },
   title: {
     fontSize: 12,
     lineHeight: 17,
+    minHeight: 40,
     color: "#212121",
     marginBottom: 4,
   },
@@ -99,13 +108,13 @@ const styles = StyleSheet.create({
     position: "absolute",
     bottom: 4,
     left: 4,
-    paddingHorizontal: 4,
     borderRadius: 5,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
     backgroundColor: "rgba(0,0,0,0.6)",
     flexDirection: "row",
     alignItems: "center",
-    paddingVertical: 0,
     gap: 2,
   },
-  metaText: { fontSize: 10, color: "#fff" },
+  metaText: { fontSize: 9, color: "#fff" },
 });