Ma/OrionTV
1
0
Fork 0
mirror of https://github.com/zimplexing/OrionTV.git synced 2026-03-05 18:27:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement mobile tab navigation and enhance responsive layout for better user experience

Browse Source
This commit is contained in:
zimplexing
2025-08-06 22:00:29 +08:00
parent 7c7e8e0b97
commit 60c4e7420d
7 changed files with 174 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/CustomScrollView.tsx
View File

@@ -93,38 +93,35 @@ const CustomScrollView: React.FC<CustomScrollViewProps> = ({
const dynamicStyles = StyleSheet.create({
listContent: {
paddingBottom: responsiveConfig.spacing * 2,
paddingHorizontal: responsiveConfig.spacing / 2,
},
rowContainer: {
gridContainer: {
flexDirection: "row",
justifyContent: responsiveConfig.deviceType === 'mobile' ? "space-around" : "flex-start",
flexWrap: "wrap",
marginBottom: responsiveConfig.spacing / 2,
justifyContent: "space-evenly",
},
itemContainer: {
marginHorizontal: responsiveConfig.spacing / 2,
alignItems: "center",
width: responsiveConfig.cardWidth,
marginBottom: responsiveConfig.spacing,
},
});
return (
<ScrollView
contentContainerStyle={[commonStyles.gridContainer, dynamicStyles.listContent]}
contentContainerStyle={dynamicStyles.listContent}
onScroll={handleScroll}
scrollEventThrottle={16}
showsVerticalScrollIndicator={responsiveConfig.deviceType !== 'tv'}
>
{data.length > 0 ? (
<>
{/* Render content in a responsive grid layout */}
{Array.from({ length: Math.ceil(data.length / effectiveColumns) }).map((_, rowIndex) => (
<View key={rowIndex} style={dynamicStyles.rowContainer}>
{data.slice(rowIndex * effectiveColumns, (rowIndex + 1) * effectiveColumns).map((item, index) => (
<View key={index} style={dynamicStyles.itemContainer}>
{renderItem({ item, index: rowIndex * effectiveColumns + index })}
</View>
))}
</View>
))}
<View style={dynamicStyles.gridContainer}>
{data.map((item, index) => (
<View key={index} style={dynamicStyles.itemContainer}>
{renderItem({ item, index })}
</View>
))}
</View>
{renderFooter()}
</>
) : (