1

2026-07-07 23:18:38 +08:00 · 2026-03-06 14:52:28 +08:00
parent 9b7e728c9d
commit c9c62d3e48
4 changed files with 193 additions and 26 deletions
--- a/components/NativeVideoPlayer.tsx
+++ b/components/NativeVideoPlayer.tsx
@@ -1,6 +1,6 @@
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import { View, StyleSheet, Dimensions } from 'react-native';
-import { Video, ResizeMode, AVPlaybackStatus } from 'expo-av';
+import { WebView } from 'react-native-webview';

 const { width } = Dimensions.get('window');
 const VIDEO_HEIGHT = width * 0.5625;
@@ -9,23 +9,36 @@ interface Props {
  uri: string;
 }

+const buildHtml = (uri: string) => `
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+  * { margin:0; padding:0; box-sizing:border-box; background:#000; }
+  video { width:100vw; height:100vh; object-fit:contain; display:block; }
+</style>
+</head>
+<body>
+<video id="v" controls autoplay playsinline webkit-playsinline></video>
+<script>
+  document.getElementById('v').src = ${JSON.stringify(uri)};
+</script>
+</body>
+</html>
+`;
+
 export function NativeVideoPlayer({ uri }: Props) {
-  const videoRef = useRef<Video>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-
-  const onPlaybackStatusUpdate = (s: AVPlaybackStatus) => {
-    if (s.isLoaded) setIsPlaying(s.isPlaying);
-  };
-
  return (
    <View style={styles.container}>
-      <Video
-        ref={videoRef}
-        source={{ uri, headers: { Referer: 'https://www.bilibili.com' } }}
-        style={styles.video}
-        resizeMode={ResizeMode.CONTAIN}
-        onPlaybackStatusUpdate={onPlaybackStatusUpdate}
-        useNativeControls
+      <WebView
+        source={{ html: buildHtml(uri) }}
+        style={styles.webview}
+        allowsInlineMediaPlayback
+        mediaPlaybackRequiresUserAction={false}
+        javaScriptEnabled
+        originWhitelist={['*']}
+        scrollEnabled={false}
      />
    </View>
  );
@@ -33,5 +46,5 @@ export function NativeVideoPlayer({ uri }: Props) {

 const styles = StyleSheet.create({
  container: { width, height: VIDEO_HEIGHT, backgroundColor: '#000' },
-  video: { width, height: VIDEO_HEIGHT },
+  webview: { width, height: VIDEO_HEIGHT, backgroundColor: '#000' },
 });
--- a/components/VideoPlayer.tsx
+++ b/components/VideoPlayer.tsx
@@ -1,5 +1,6 @@
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import { View, StyleSheet, Dimensions, Text, Platform } from 'react-native';
+import { NativeVideoPlayer } from './NativeVideoPlayer';

 const { width } = Dimensions.get('window');
 const VIDEO_HEIGHT = width * 0.5625;
@@ -30,8 +31,6 @@ export function VideoPlayer({ uri }: Props) {
    );
  }

-  // Native: use expo-av
-  const NativeVideoPlayer = require('./NativeVideoPlayer').NativeVideoPlayer;
  return <NativeVideoPlayer uri={uri} />;
 }

--- a/fixbug.md
+++ b/fixbug.md
@@ -0,0 +1,134 @@
+# Bug Report
+
+## [Critical] VideoPlayer - B站防盗链导致视频无法播放
+
+**文件**: `components/NativeVideoPlayer.tsx`, `components/VideoPlayer.tsx`
+
+B站 CDN 对视频流地址实施严格的防盗链策略（Referer 校验 + UA 校验 + 时效签名）。
+`expo-av` 的 `Video` 组件无法可靠地在底层 HTTP 请求中注入自定义 `Referer` / `User-Agent`，
+实际播放时服务器会返回 403，视频黑屏或播放失败。
+
+**修复方案**: 改用 `react-native-webview` 加载 B站官方嵌入播放器：
+```
+https://player.bilibili.com/player.html?bvid={bvid}&page=1&high_quality=1&danmaku=1
+```
+该嵌入页由浏览器环境发起请求，Referer/Cookie 天然正确，可正常播放。
+
+---
+
+## [Critical] VideoPlayer.tsx - 组件内动态 require
+
+**文件**: `components/VideoPlayer.tsx:34`
+
+```ts
+// 错误写法：在组件函数体内动态 require
+const NativeVideoPlayer = require('./NativeVideoPlayer').NativeVideoPlayer;
+```
+
+每次渲染都执行 `require()`，虽然 Metro 会缓存模块，但这是反模式，
+且与 React 渲染机制不兼容（Hook 规则 / 条件渲染中的动态导入）。
+同文件还导入了 `useRef, useState` 但从未使用。
+
+**修复方案**: 改为文件顶部静态 import，移除无用导入。
+
+---
+
+## [High] NativeVideoPlayer.tsx - isPlaying 状态无意义
+
+**文件**: `components/NativeVideoPlayer.tsx:14`
+
+```ts
+const [isPlaying, setIsPlaying] = useState(false);
+```
+
+追踪了播放状态但没有任何自定义控制 UI 使用它，纯冗余代码。
+
+---
+
+## [High] useVideoDetail.ts - getPlayUrl 在未登录时返回空/错误
+
+**文件**: `hooks/useVideoDetail.ts:19`
+
+```ts
+setStreamUrl(playData.durl[0]?.url ?? null);
+```
+
+B站 `/x/player/playurl` 接口：
+- 未登录时对部分视频返回 `code: -101`（未登录）或 `code: -403`（无权限）
+- 高清版本（qn>=80）需要大会员，未登录时 `durl` 数组为空或 fallback 到极低画质
+- `fnval: 1` 只请求 durl 格式，但部分视频仅提供 dash 格式，`durl` 为空数组
+
+`playData.durl[0]?.url` 为 `undefined`，`streamUrl` 始终 null，播放器持续显示"视频加载中"。
+
+**修复方案**: 使用 WebView 嵌入播放器后，此接口调用不再需要，移除即可。
+
+---
+
+## [High] services/types.ts - PlayUrlResponse 类型不完整
+
+**文件**: `services/types.ts:37`
+
+```ts
+export interface PlayUrlResponse {
+  durl: Array<{ url: string; length: number; size: number }>;
+  quality: number;
+}
+```
+
+缺少：
+- 接口 `code` 字段（API 响应状态码）
+- `dash` 格式（`fnval >= 16` 时返回，包含 video/audio 分离流）
+- `durl` 在 dash 模式下为 `undefined`，当前定义为必填数组会导致类型错误
+
+---
+
+## [Medium] app/video/[bvid].tsx - error 状态未处理
+
+**文件**: `app/video/[bvid].tsx:20`
+
+```ts
+const { video, streamUrl, loading: videoLoading } = useVideoDetail(bvid as string);
+```
+
+`useVideoDetail` 返回了 `error`，但页面中完全未使用，接口失败时用户看不到任何错误提示。
+
+---
+
+## [Medium] LoginModal.tsx - 移动端无法从响应头提取 Cookie
+
+**文件**: `components/LoginModal.tsx:62`
+
+```ts
+const setCookie = res.headers['set-cookie'];
+const match = setCookie?.find((c: string) => c.includes('SESSDATA'));
+```
+
+B站登录成功后 `SESSDATA` 以 `httpOnly` Cookie 设置，在 React Native 中
+`axios` 响应头里 `set-cookie` 通常为 `undefined`（被底层 HTTP 客户端过滤），
+导致登录二维码扫描后 `cookie` 始终为 `undefined`，登录流程无法完成。
+
+---
+
+## [Low] useVideoList.ts - useCallback 依赖导致的 stale closure 风险
+
+**文件**: `hooks/useVideoList.ts:11`
+
+```ts
+const load = useCallback(async (reset = false) => {
+  if (loading) return;   // loading 为 stale 值时可能错误地放行重复请求
+  ...
+}, [loading, page]);     // 每次 loading/page 变化都重新创建函数
+```
+
+`load` 依赖 `loading` 用于防重，但同时 `onEndReached` 持有对 `load` 的引用，
+在 `loading=true` 的渲染周期内 `load` 会重新创建，而 FlatList 引用可能还是旧版本，
+导致防重逻辑失效或加载多次。应改用 `useRef` 追踪 loading 状态做防重。
+
+---
+
+## [Low] App.tsx - 残留 expo 模板代码
+
+**文件**: `App.tsx`
+
+文件内容为 expo 初始化模板，实际项目已使用 expo-router（入口为 `expo-router/entry`），
+`App.tsx` 不会被执行，但留在项目中容易造成混淆。
--- a/services/bilibili.ts
+++ b/services/bilibili.ts
@@ -5,20 +5,41 @@ import type { VideoItem, Comment, PlayUrlResponse, QRCodeInfo } from './types';
 const BASE = 'https://api.bilibili.com';
 const PASSPORT = 'https://passport.bilibili.com';

+function generateBuvid3(): string {
+  const h = () => Math.floor(Math.random() * 16).toString(16);
+  const s = (n: number) => Array.from({ length: n }, h).join('');
+  return `${s(8)}-${s(4)}-${s(4)}-${s(4)}-${s(12)}infoc`;
+}
+
+async function getBuvid3(): Promise<string> {
+  let buvid3 = await AsyncStorage.getItem('buvid3');
+  if (!buvid3) {
+    buvid3 = generateBuvid3();
+    await AsyncStorage.setItem('buvid3', buvid3);
+  }
+  return buvid3;
+}
+
 const api = axios.create({
  baseURL: BASE,
  timeout: 10000,
  headers: {
+    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
    'Referer': 'https://www.bilibili.com',
-    'User-Agent': 'Mozilla/5.0 (Linux; Android 11) AppleWebKit/537.36 Chrome/91.0',
+    'Origin': 'https://www.bilibili.com',
+    'Accept': 'application/json, text/plain, */*',
+    'Accept-Language': 'zh-CN,zh;q=0.9',
  },
 });

 api.interceptors.request.use(async (config) => {
-  const sessdata = await AsyncStorage.getItem('SESSDATA');
-  if (sessdata) {
-    config.headers['Cookie'] = `SESSDATA=${sessdata}`;
-  }
+  const [sessdata, buvid3] = await Promise.all([
+    AsyncStorage.getItem('SESSDATA'),
+    getBuvid3(),
+  ]);
+  const cookies: string[] = [`buvid3=${buvid3}`];
+  if (sessdata) cookies.push(`SESSDATA=${sessdata}`);
+  config.headers['Cookie'] = cookies.join('; ');
  return config;
 });

@@ -34,7 +55,7 @@ export async function getVideoDetail(bvid: string): Promise<VideoItem> {

 export async function getPlayUrl(bvid: string, cid: number): Promise<PlayUrlResponse> {
  const res = await api.get('/x/player/playurl', {
-    params: { bvid, cid, qn: 64, fnval: 1 },
+    params: { bvid, cid, qn: 64, fnval: 0, platform: 'html5' },
  });
  return res.data.data as PlayUrlResponse;
 }