版本1.0

components/FollowedLiveStrip.tsx

@@ -1,11 +1,18 @@
-import React, { useEffect, useState } from 'react';
-import { View, Text, ScrollView, TouchableOpacity, Image, StyleSheet } from 'react-native';
-import { useRouter } from 'expo-router';
-import { useAuthStore } from '../store/authStore';
-import { getFollowedLiveRooms } from '../services/bilibili';
-import { LivePulse } from './LivePulse';
-import { proxyImageUrl } from '../utils/imageUrl';
-import type { LiveRoom } from '../services/types';
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+} from "react-native";
+import { useRouter } from "expo-router";
+import { useAuthStore } from "../store/authStore";
+import { getFollowedLiveRooms } from "../services/bilibili";
+import { LivePulse } from "./LivePulse";
+import { proxyImageUrl } from "../utils/imageUrl";
+import type { LiveRoom } from "../services/types";
 
 export function FollowedLiveStrip() {
   const { sessdata } = useAuthStore();
@@ -14,28 +21,30 @@ export function FollowedLiveStrip() {
 
   useEffect(() => {
     if (!sessdata) return;
-    getFollowedLiveRooms().then(setRooms).catch(() => {});
+    getFollowedLiveRooms()
+      .then(setRooms)
+      .catch(() => {});
   }, [sessdata]);
 
   if (!sessdata || rooms.length === 0) return null;
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>我关注的直播</Text>
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={styles.scrollContent}
       >
-        {rooms.map((room) => (
+        {rooms.map((room, index) => (
           <TouchableOpacity
-            key={room.roomid}
+            key={`followed-${room.roomid ?? index}`}
             style={styles.item}
             onPress={() => router.push(`/live/${room.roomid}` as any)}
             activeOpacity={0.7}
           >
             <View style={styles.pulseRow}>
               <LivePulse />
+              <Text style={{ color: "#fff", fontSize: 9,marginLeft:2 }}>直播</Text>
             </View>
             <Image
               source={{ uri: proxyImageUrl(room.face) }}
@@ -53,40 +62,42 @@ export function FollowedLiveStrip() {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#f4f4f4',
+    backgroundColor: "#f4f4f4",
     paddingHorizontal: 12,
     paddingVertical: 8,
   },
-  title: {
-    fontSize: 12,
-    color: '#999',
-    marginBottom: 6,
-  },
   scrollContent: {
     gap: 12,
-    alignItems: 'center',
+    alignItems: "center",
   },
   item: {
-    alignItems: 'center',
+    alignItems: "center",
     width: 56,
+    position: "relative",
   },
   pulseRow: {
-    height: 16,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: 4,
+    position: "absolute",
+    backgroundColor: "rgba(0,0,0,0.6)",
+    bottom: 18,
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+    borderRadius: 10,
+    zIndex: 100,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
   },
   avatar: {
     width: 44,
     height: 44,
     borderRadius: 22,
-    backgroundColor: '#eee',
+    backgroundColor: "#eee",
   },
   name: {
     fontSize: 11,
-    color: '#333',
+    color: "#333",
     marginTop: 4,
-    textAlign: 'center',
+    textAlign: "center",
     width: 56,
   },
 });