mirror of
https://gh-proxy.org/https://github.com/tiajinsha/JKVideo
synced 2026-07-07 23:18:38 +08:00
feat: add all source files - services, store, hooks, components, screens
This commit is contained in:
Developer
41
app/_layout.tsx
Normal file
41
app/_layout.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { Tabs } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { useEffect } from 'react';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
|
||||
export default function RootLayout() {
|
||||
const restore = useAuthStore(s => s.restore);
|
||||
|
||||
useEffect(() => {
|
||||
restore();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<StatusBar style="dark" />
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
tabBarActiveTintColor: '#00AEEC',
|
||||
tabBarInactiveTintColor: '#999',
|
||||
tabBarStyle: { borderTopColor: '#eee' },
|
||||
headerShown: false,
|
||||
}}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: '首页',
|
||||
tabBarIcon: ({ color, size }: { color: string; size: number }) => (
|
||||
<Ionicons name="home" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="video"
|
||||
options={{ href: null }}
|
||||
/>
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
}
|
||||
86
app/index.tsx
Normal file
86
app/index.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
View, FlatList, StyleSheet, SafeAreaView,
|
||||
Text, TouchableOpacity, ActivityIndicator, Dimensions
|
||||
} from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { VideoCard } from '../components/VideoCard';
|
||||
import { LoginModal } from '../components/LoginModal';
|
||||
import { useVideoList } from '../hooks/useVideoList';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import type { VideoItem } from '../services/types';
|
||||
|
||||
export default function HomeScreen() {
|
||||
const router = useRouter();
|
||||
const { videos, loading, refreshing, load, refresh } = useVideoList();
|
||||
const { isLoggedIn, logout } = useAuthStore();
|
||||
const [showLogin, setShowLogin] = useState(false);
|
||||
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const renderItem = ({ item, index }: { item: VideoItem; index: number }) => (
|
||||
<View style={index % 2 === 0 ? styles.leftCol : styles.rightCol}>
|
||||
<VideoCard
|
||||
item={item}
|
||||
onPress={() => router.push(`/video/${item.bvid}` as any)}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.safe}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.logo}>哔哩哔哩</Text>
|
||||
<View style={styles.headerRight}>
|
||||
<TouchableOpacity style={styles.headerBtn}>
|
||||
<Ionicons name="search" size={22} color="#212121" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={styles.headerBtn}
|
||||
onPress={() => isLoggedIn ? logout() : setShowLogin(true)}
|
||||
>
|
||||
<Ionicons name={isLoggedIn ? 'person' : 'person-outline'} size={22} color="#00AEEC" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.tabRow}>
|
||||
<Text style={styles.tabActive}>热门</Text>
|
||||
<View style={styles.tabUnderline} />
|
||||
</View>
|
||||
|
||||
<FlatList
|
||||
data={videos}
|
||||
keyExtractor={item => item.bvid}
|
||||
numColumns={2}
|
||||
columnWrapperStyle={styles.row}
|
||||
contentContainerStyle={styles.list}
|
||||
renderItem={renderItem}
|
||||
onRefresh={refresh}
|
||||
refreshing={refreshing}
|
||||
onEndReached={() => load()}
|
||||
onEndReachedThreshold={0.5}
|
||||
ListFooterComponent={loading ? <ActivityIndicator style={styles.footer} color="#00AEEC" /> : null}
|
||||
/>
|
||||
|
||||
<LoginModal visible={showLogin} onClose={() => setShowLogin(false)} />
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safe: { flex: 1, backgroundColor: '#f4f4f4' },
|
||||
header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 14, paddingVertical: 10, backgroundColor: '#fff', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#eee' },
|
||||
logo: { fontSize: 20, fontWeight: '800', color: '#00AEEC', letterSpacing: -0.5 },
|
||||
headerRight: { flexDirection: 'row', gap: 8 },
|
||||
headerBtn: { padding: 4 },
|
||||
tabRow: { backgroundColor: '#fff', paddingHorizontal: 16, paddingBottom: 0, flexDirection: 'row', alignItems: 'center', position: 'relative' },
|
||||
tabActive: { fontSize: 15, fontWeight: '700', color: '#00AEEC', paddingVertical: 10 },
|
||||
tabUnderline: { position: 'absolute', bottom: 0, left: 16, width: 24, height: 2, backgroundColor: '#00AEEC', borderRadius: 1 },
|
||||
row: { paddingHorizontal: 8 },
|
||||
list: { paddingTop: 8, paddingBottom: 80 },
|
||||
leftCol: { marginLeft: 4, marginRight: 2 },
|
||||
rightCol: { marginLeft: 2, marginRight: 4 },
|
||||
footer: { marginVertical: 16 },
|
||||
});
|
||||
135
app/video/[bvid].tsx
Normal file
135
app/video/[bvid].tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
View, Text, ScrollView, StyleSheet, SafeAreaView,
|
||||
TouchableOpacity, Image, ActivityIndicator
|
||||
} from 'react-native';
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { VideoPlayer } from '../../components/VideoPlayer';
|
||||
import { CommentItem } from '../../components/CommentItem';
|
||||
import { useVideoDetail } from '../../hooks/useVideoDetail';
|
||||
import { useComments } from '../../hooks/useComments';
|
||||
import { formatCount } from '../../utils/format';
|
||||
|
||||
type Tab = 'intro' | 'comments';
|
||||
|
||||
export default function VideoDetailScreen() {
|
||||
const { bvid } = useLocalSearchParams<{ bvid: string }>();
|
||||
const router = useRouter();
|
||||
const { video, streamUrl, loading: videoLoading } = useVideoDetail(bvid as string);
|
||||
const { comments, loading: cmtLoading, load: loadComments } = useComments(video?.aid ?? 0);
|
||||
const [tab, setTab] = useState<Tab>('comments');
|
||||
|
||||
useEffect(() => {
|
||||
if (video?.aid) loadComments();
|
||||
}, [video?.aid]);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.safe}>
|
||||
<View style={styles.topBar}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
|
||||
<Ionicons name="chevron-back" size={24} color="#212121" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.topTitle} numberOfLines={1}>{video?.title ?? '视频详情'}</Text>
|
||||
</View>
|
||||
|
||||
<VideoPlayer uri={streamUrl} />
|
||||
|
||||
<ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}>
|
||||
{videoLoading ? (
|
||||
<ActivityIndicator style={styles.loader} color="#00AEEC" />
|
||||
) : video ? (
|
||||
<>
|
||||
<View style={styles.titleSection}>
|
||||
<Text style={styles.title}>{video.title}</Text>
|
||||
<View style={styles.statsRow}>
|
||||
<StatBadge icon="play" count={video.stat.view} />
|
||||
<StatBadge icon="heart" count={video.stat.like} />
|
||||
<StatBadge icon="star" count={video.stat.favorite} />
|
||||
<StatBadge icon="chatbubble" count={video.stat.reply} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.upRow}>
|
||||
<Image source={{ uri: video.owner.face }} style={styles.avatar} />
|
||||
<Text style={styles.upName}>{video.owner.name}</Text>
|
||||
<TouchableOpacity style={styles.followBtn}>
|
||||
<Text style={styles.followTxt}>+ 关注</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.tabBar}>
|
||||
<TouchableOpacity style={styles.tabItem} onPress={() => setTab('intro')}>
|
||||
<Text style={[styles.tabLabel, tab === 'intro' && styles.tabActive]}>简介</Text>
|
||||
{tab === 'intro' && <View style={styles.tabUnderline} />}
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.tabItem} onPress={() => setTab('comments')}>
|
||||
<Text style={[styles.tabLabel, tab === 'comments' && styles.tabActive]}>
|
||||
评论 {video.stat.reply > 0 ? formatCount(video.stat.reply) : ''}
|
||||
</Text>
|
||||
{tab === 'comments' && <View style={styles.tabUnderline} />}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{tab === 'intro' ? (
|
||||
<View style={styles.descBox}>
|
||||
<Text style={styles.descText}>{video.desc || '暂无简介'}</Text>
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
{comments.map(c => <CommentItem key={c.rpid} item={c} />)}
|
||||
{cmtLoading && <ActivityIndicator style={styles.loader} color="#00AEEC" />}
|
||||
{!cmtLoading && comments.length > 0 && (
|
||||
<TouchableOpacity style={styles.loadMore} onPress={loadComments}>
|
||||
<Text style={styles.loadMoreTxt}>加载更多评论</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{!cmtLoading && comments.length === 0 && !videoLoading && (
|
||||
<Text style={styles.emptyTxt}>暂无评论</Text>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
function StatBadge({ icon, count }: { icon: string; count: number }) {
|
||||
return (
|
||||
<View style={styles.stat}>
|
||||
<Ionicons name={icon as any} size={14} color="#999" />
|
||||
<Text style={styles.statText}>{formatCount(count)}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safe: { flex: 1, backgroundColor: '#fff' },
|
||||
topBar: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 8, paddingVertical: 8, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#eee' },
|
||||
backBtn: { padding: 4 },
|
||||
topTitle: { flex: 1, fontSize: 15, fontWeight: '600', marginLeft: 4, color: '#212121' },
|
||||
scroll: { flex: 1 },
|
||||
loader: { marginVertical: 30 },
|
||||
titleSection: { padding: 14 },
|
||||
title: { fontSize: 16, fontWeight: '600', color: '#212121', lineHeight: 22, marginBottom: 8 },
|
||||
statsRow: { flexDirection: 'row', gap: 16 },
|
||||
stat: { flexDirection: 'row', alignItems: 'center', gap: 3 },
|
||||
statText: { fontSize: 12, color: '#999' },
|
||||
upRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 14, paddingBottom: 12, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#f0f0f0' },
|
||||
avatar: { width: 38, height: 38, borderRadius: 19, marginRight: 10 },
|
||||
upName: { flex: 1, fontSize: 14, color: '#212121', fontWeight: '500' },
|
||||
followBtn: { backgroundColor: '#00AEEC', paddingHorizontal: 14, paddingVertical: 5, borderRadius: 14 },
|
||||
followTxt: { color: '#fff', fontSize: 12, fontWeight: '600' },
|
||||
tabBar: { flexDirection: 'row', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#eee' },
|
||||
tabItem: { flex: 1, alignItems: 'center', paddingVertical: 12, position: 'relative' },
|
||||
tabLabel: { fontSize: 14, color: '#999' },
|
||||
tabActive: { color: '#00AEEC', fontWeight: '700' },
|
||||
tabUnderline: { position: 'absolute', bottom: 0, width: 24, height: 2, backgroundColor: '#00AEEC', borderRadius: 1 },
|
||||
descBox: { padding: 16 },
|
||||
descText: { fontSize: 14, color: '#555', lineHeight: 22 },
|
||||
loadMore: { alignItems: 'center', padding: 16 },
|
||||
loadMoreTxt: { color: '#00AEEC', fontSize: 13 },
|
||||
emptyTxt: { textAlign: 'center', color: '#bbb', padding: 30 },
|
||||
});
|
||||
9
app/video/_layout.tsx
Normal file
9
app/video/_layout.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { Stack } from 'expo-router';
|
||||
|
||||
export default function VideoLayout() {
|
||||
return (
|
||||
<Stack screenOptions={{ headerShown: false }}>
|
||||
<Stack.Screen name="[bvid]" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user