From 44b49101356d0e0c9dc04bdbf8df4922254d0a83 Mon Sep 17 00:00:00 2001
From: Developer <dev@bilibili-app.local>
Date: Tue, 10 Mar 2026 22:47:11 +0800
Subject: [PATCH] feat: add DanmakuList component

---
 components/DanmakuList.tsx | 103 +++++++++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 components/DanmakuList.tsx

diff --git a/components/DanmakuList.tsx b/components/DanmakuList.tsx
new file mode 100644
index 0000000..f92436c
--- /dev/null
+++ b/components/DanmakuList.tsx
@@ -0,0 +1,103 @@
+import React, { useRef, useMemo, useEffect } from 'react';
+import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { DanmakuItem } from '../services/types';
+import { danmakuColorToCss } from '../utils/danmaku';
+
+interface Props {
+  danmakus: DanmakuItem[];
+  currentTime: number;
+  visible: boolean;
+  onToggle: () => void;
+}
+
+export default function DanmakuList({ danmakus, currentTime, visible, onToggle }: Props) {
+  const flatListRef = useRef<FlatList>(null);
+
+  const visibleItems = useMemo(
+    () => danmakus.filter(d => d.time <= currentTime),
+    [danmakus, currentTime]
+  );
+
+  useEffect(() => {
+    if (visible && visibleItems.length > 0) {
+      flatListRef.current?.scrollToEnd({ animated: true });
+    }
+  }, [visibleItems.length, visible]);
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity style={styles.header} onPress={onToggle} activeOpacity={0.7}>
+        <Ionicons
+          name={visible ? 'chatbubbles' : 'chatbubbles-outline'}
+          size={16}
+          color="#00AEEC"
+        />
+        <Text style={styles.headerText}>
+          弹幕 {danmakus.length > 0 ? `(${danmakus.length})` : ''}
+        </Text>
+        <Ionicons
+          name={visible ? 'chevron-up' : 'chevron-down'}
+          size={14}
+          color="#999"
+        />
+      </TouchableOpacity>
+
+      {visible && (
+        <FlatList
+          ref={flatListRef}
+          data={visibleItems}
+          keyExtractor={(_, i) => String(i)}
+          style={styles.list}
+          renderItem={({ item }) => (
+            <Text
+              style={[styles.item, { color: danmakuColorToCss(item.color) }]}
+              numberOfLines={1}
+            >
+              {item.text}
+            </Text>
+          )}
+          ListEmptyComponent={
+            <Text style={styles.empty}>暂无弹幕</Text>
+          }
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#fff',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#eee',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    gap: 6,
+  },
+  headerText: {
+    flex: 1,
+    fontSize: 13,
+    color: '#212121',
+    fontWeight: '500',
+  },
+  list: {
+    height: 180,
+    paddingHorizontal: 12,
+  },
+  item: {
+    fontSize: 13,
+    paddingVertical: 3,
+    lineHeight: 18,
+  },
+  empty: {
+    fontSize: 12,
+    color: '#999',
+    textAlign: 'center',
+    paddingVertical: 20,
+  },
+});