comi-logic/expo-popcore-app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit: expo-popcore-app

Browse Source
This commit is contained in:
imeepos
2025-12-25 16:25:55 +08:00
commit 02d0c807cd
160 changed files with 39560 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
app/channels.tsx Normal file
View File

@@ -0,0 +1,173 @@
import { useState } from 'react'
import {
View,
Text,
StyleSheet,
Pressable,
StatusBar as RNStatusBar,
} from 'react-native'
import { StatusBar } from 'expo-status-bar'
import { LinearGradient } from 'expo-linear-gradient'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useRouter } from 'expo-router'
import { useTranslation } from 'react-i18next'
import { TopArrowIcon } from '@/components/icon'
import GradientText from '@/components/GradientText'
export default function ChannelsScreen() {
const { t } = useTranslation()
const router = useRouter()
const [isExpanded, setIsExpanded] = useState(true)
const [selectedChannel, setSelectedChannel] = useState(2) // 默认选中第二个频道
// 频道数据
const channels = Array.from({ length: 13 }, (_, i) => ({
id: i + 1,
name: t('channels.channelName'),
}))
return (
<View style={styles.screen}>
<StatusBar style="light" />
<RNStatusBar barStyle="light-content" />
{/* 顶部容器 - 包含 header 和频道选择区域，带底部圆角 */}
<View style={styles.topContainer}>
<SafeAreaView style={styles.safeArea} edges={['top']}>
{/* 标题栏 */}
<View style={styles.header}>
<Text style={styles.headerTitle}>{t('channels.title')}</Text>
<Pressable
onPress={() => {
if (isExpanded) {
router.push('/')
} else {
setIsExpanded(true)
}
}}
>
<TopArrowIcon />
</Pressable>
</View>
{/* 频道选择区域 */}
{isExpanded && (
<View style={styles.channelsSection}>
<View style={styles.channelsGrid}>
{channels.map((channel) => {
return (
<Pressable
key={channel.id}
onPress={() => setSelectedChannel(channel.id)}
style={[styles.channelButtonWrapper]}
>
{selectedChannel === channel.id ? (
<LinearGradient
colors={['#FF9966', '#FF6699', '#9966FF']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={styles.channelButtonGradient}
>
<View style={styles.channelButtonDefault}>
<GradientText
colors={['#FF9966', '#FF6699', '#9966FF']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={styles.channelButtonText}
>
{channel.name}
</GradientText>
</View>
</LinearGradient>
) : (
<View style={styles.channelButtonWrapperUnselected}>
<View style={styles.channelButtonDefault}>
<Text style={styles.channelButtonText}>
{channel.name}
</Text>
</View>
</View>
)}
</Pressable>
)
})}
</View>
</View>
)}
</SafeAreaView>
</View>
</View>
)
}
const styles = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: '#0A0A0A',
},
topContainer: {
backgroundColor: '#16181B',
borderBottomLeftRadius: 16,
borderBottomRightRadius: 16,
overflow: 'hidden',
},
safeArea: {
backgroundColor: '#16181B',
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 16,
paddingTop: 27,
paddingBottom: 12,
},
headerTitle: {
color: '#F5F5F5',
fontSize: 12,
fontWeight: '500',
},
searchText: {
color: '#ABABAB',
fontSize: 14,
fontWeight: '400',
},
channelsSection: {
paddingHorizontal: 12,
paddingBottom: 12,
},
channelsGrid: {
flexDirection: 'row',
flexWrap: 'wrap',
gap: 8,
},
channelButtonWrapper: {
// 按钮宽度根据内容自适应
},
channelButtonGradient: {
borderRadius: 100,
padding: 1,
},
channelButtonWrapperUnselected: {
borderRadius: 100,
padding: 1,
backgroundColor: 'transparent',
},
channelButtonDefault: {
backgroundColor: '#262A31',
borderRadius: 100,
paddingVertical: 8,
paddingHorizontal: 17,
borderWidth: 1,
borderColor: '#262A31',
},
channelButtonText: {
color: '#F5F5F5',
fontSize: 12,
fontWeight: '500',
textAlign: 'center',
},
})