1

app/search.tsx

@@ -0,0 +1,181 @@
+import React, { useRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  FlatList,
+  ActivityIndicator,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useRouter } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+import { VideoCard } from '../components/VideoCard';
+import { useSearch } from '../hooks/useSearch';
+import type { VideoItem } from '../services/types';
+
+export default function SearchScreen() {
+  const router = useRouter();
+  const { keyword, setKeyword, results, loading, hasMore, search, loadMore } = useSearch();
+  const inputRef = useRef<TextInput>(null);
+
+  const handleSearch = useCallback(() => {
+    if (keyword.trim()) {
+      search(keyword, true);
+    }
+  }, [keyword, search]);
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: VideoItem; index: number }) => {
+      if (index % 2 !== 0) return null;
+      const right = results[index + 1];
+      return (
+        <View style={styles.row}>
+          <View style={styles.leftCol}>
+            <VideoCard
+              item={item}
+              onPress={() => router.push(`/video/${item.bvid}` as any)}
+            />
+          </View>
+          {right ? (
+            <View style={styles.rightCol}>
+              <VideoCard
+                item={right}
+                onPress={() => router.push(`/video/${right.bvid}` as any)}
+              />
+            </View>
+          ) : (
+            <View style={styles.rightCol} />
+          )}
+        </View>
+      );
+    },
+    [results, router],
+  );
+
+  const keyExtractor = useCallback(
+    (_: VideoItem, index: number) => String(index),
+    [],
+  );
+
+  const ListEmptyComponent = () => {
+    if (loading) return null;
+    return (
+      <View style={styles.emptyBox}>
+        <Ionicons name="search-outline" size={48} color="#ddd" />
+        <Text style={styles.emptyText}>
+          {results.length === 0 && keyword.trim()
+            ? '没有找到相关视频'
+            : '输入关键词搜索'}
+        </Text>
+      </View>
+    );
+  };
+
+  return (
+    <SafeAreaView style={styles.safe} edges={['top', 'left', 'right']}>
+      {/* Search header */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
+          <Ionicons name="chevron-back" size={24} color="#212121" />
+        </TouchableOpacity>
+        <View style={styles.inputWrap}>
+          <TextInput
+            ref={inputRef}
+            style={styles.input}
+            placeholder="搜索视频、UP主..."
+            placeholderTextColor="#999"
+            value={keyword}
+            onChangeText={setKeyword}
+            onSubmitEditing={handleSearch}
+            returnKeyType="search"
+            autoFocus
+            autoCapitalize="none"
+            autoCorrect={false}
+          />
+          {keyword.length > 0 && (
+            <TouchableOpacity onPress={() => setKeyword('')} style={styles.clearBtn}>
+              <Ionicons name="close-circle" size={16} color="#bbb" />
+            </TouchableOpacity>
+          )}
+        </View>
+        <TouchableOpacity style={styles.searchBtn} onPress={handleSearch}>
+          <Text style={styles.searchBtnText}>搜索</Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* Results */}
+      <FlatList
+        data={results}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        contentContainerStyle={styles.listContent}
+        onEndReached={loadMore}
+        onEndReachedThreshold={0.5}
+        ListEmptyComponent={<ListEmptyComponent />}
+        ListFooterComponent={
+          loading && results.length > 0 ? (
+            <View style={styles.footer}>
+              <ActivityIndicator color="#00AEEC" />
+            </View>
+          ) : null
+        }
+        keyboardShouldPersistTaps="handled"
+      />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: '#f4f4f4' },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    backgroundColor: '#fff',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#eee',
+    gap: 6,
+  },
+  backBtn: { padding: 4 },
+  inputWrap: {
+    flex: 1,
+    height: 34,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 17,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+  },
+  input: {
+    flex: 1,
+    fontSize: 14,
+    color: '#212121',
+    padding: 0,
+  },
+  clearBtn: { paddingLeft: 4 },
+  searchBtn: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  searchBtnText: { fontSize: 14, color: '#00AEEC', fontWeight: '600' },
+  listContent: { paddingTop: 6, paddingBottom: 20 },
+  row: {
+    flexDirection: 'row',
+    paddingHorizontal: 1,
+    justifyContent: 'flex-start',
+  },
+  leftCol: { flex: 1, marginLeft: 4, marginRight: 2 },
+  rightCol: { flex: 1, marginLeft: 2, marginRight: 4 },
+  emptyBox: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 80,
+    gap: 12,
+  },
+  emptyText: { fontSize: 14, color: '#bbb' },
+  footer: { height: 48, alignItems: 'center', justifyContent: 'center' },
+});