1- import { useState , useEffect } from ' react' ;
2- import { Dimensions , Platform } from ' react-native' ;
1+ import { useState , useEffect } from " react" ;
2+ import { Dimensions , Platform } from " react-native" ;
33
4- export type DeviceType = ' mobile' | ' tablet' | 'tv' ;
4+ export type DeviceType = " mobile" | " tablet" | "tv" ;
55
66export interface ResponsiveConfig {
77 deviceType : DeviceType ;
@@ -17,40 +17,44 @@ export interface ResponsiveConfig {
1717const BREAKPOINTS = {
1818 mobile : { min : 0 , max : 767 } ,
1919 tablet : { min : 768 , max : 1023 } ,
20- tv : { min : 1024 , max : Infinity }
20+ tv : { min : 1024 , max : Infinity } ,
2121} ;
2222
2323const getDeviceType = ( width : number ) : DeviceType => {
24- const isTV = process . env . EXPO_TV === '1' || Platform . isTV ;
25- if ( isTV ) return 'tv' ;
26-
27- if ( width >= BREAKPOINTS . tv . min ) return 'tv' ;
28- if ( width >= BREAKPOINTS . tablet . min ) return 'tablet' ;
29- return 'mobile' ;
24+ if ( Platform . isTV ) return "tv" ;
25+
26+ if ( width >= BREAKPOINTS . tv . min ) return "tv" ;
27+ if ( width >= BREAKPOINTS . tablet . min ) return "tablet" ;
28+ return "mobile" ;
3029} ;
3130
32- const getLayoutConfig = ( deviceType : DeviceType , width : number , height : number , isPortrait : boolean ) : ResponsiveConfig => {
33- const spacing = deviceType === 'mobile' ? 8 : deviceType === 'tablet' ? 12 : 16 ;
34-
31+ const getLayoutConfig = (
32+ deviceType : DeviceType ,
33+ width : number ,
34+ height : number ,
35+ isPortrait : boolean
36+ ) : ResponsiveConfig => {
37+ const spacing = deviceType === "mobile" ? 8 : deviceType === "tablet" ? 12 : 16 ;
38+
3539 let columns : number ;
3640 let cardWidth : number ;
3741 let cardHeight : number ;
3842
3943 switch ( deviceType ) {
40- case ' mobile'
44+ case " mobile"
4145 columns = isPortrait ? 3 : 4 ;
4246 // 使用flex布局，卡片可以更大一些来填充空间
43- cardWidth = ( width - spacing ) / columns * 0.85 ; // 增大到85%
47+ cardWidth = ( ( width - spacing ) / columns ) * 0.85 ; // 增大到85%
4448 cardHeight = cardWidth * 1.2 ; // 5:6 aspect ratio (reduced from 2:3)
4549 break ;
46-
47- case ' tablet'
50+
51+ case " tablet"
4852 columns = isPortrait ? 3 : 4 ;
49- cardWidth = ( width - spacing ) / columns * 0.85 ; // 增大到85%
53+ cardWidth = ( ( width - spacing ) / columns ) * 0.85 ; // 增大到85%
5054 cardHeight = cardWidth * 1.4 ; // slightly less tall ratio
5155 break ;
52-
53- case 'tv' :
56+
57+ case "tv" :
5458 default :
5559 columns = 5 ;
5660 cardWidth = 160 ; // Fixed width for TV
@@ -72,12 +76,12 @@ const getLayoutConfig = (deviceType: DeviceType, width: number, height: number,
7276
7377export const useResponsiveLayout = ( ) : ResponsiveConfig => {
7478 const [ dimensions , setDimensions ] = useState ( ( ) => {
75- const { width, height } = Dimensions . get ( ' window' ) ;
79+ const { width, height } = Dimensions . get ( " window" ) ;
7680 return { width, height } ;
7781 } ) ;
7882
7983 useEffect ( ( ) => {
80- const subscription = Dimensions . addEventListener ( ' change' , ( { window } ) => {
84+ const subscription = Dimensions . addEventListener ( " change" , ( { window } ) => {
8185 setDimensions ( { width : window . width , height : window . height } ) ;
8286 } ) ;
8387
@@ -87,7 +91,7 @@ export const useResponsiveLayout = (): ResponsiveConfig => {
8791 const { width, height } = dimensions ;
8892 const isPortrait = height > width ;
8993 const deviceType = getDeviceType ( width ) ;
90-
94+
9195 return getLayoutConfig ( deviceType , width , height , isPortrait ) ;
9296} ;
9397
@@ -100,31 +104,31 @@ export const useResponsiveValue = <T>(values: { mobile: T; tablet: T; tv: T }):
100104// Utility hook for responsive styles
101105export const useResponsiveStyles = ( ) => {
102106 const config = useResponsiveLayout ( ) ;
103-
107+
104108 return {
105109 // Common responsive styles
106110 container : {
107111 paddingHorizontal : config . spacing ,
108112 } ,
109-
113+
110114 // Card styles
111115 cardContainer : {
112116 width : config . cardWidth ,
113117 height : config . cardHeight ,
114118 marginBottom : config . spacing ,
115119 } ,
116-
120+
117121 // Grid styles
118122 gridContainer : {
119123 paddingHorizontal : config . spacing / 2 ,
120124 } ,
121-
125+
122126 // Typography
123- titleFontSize : config . deviceType === ' mobile' 18 : config . deviceType === ' tablet' 22 : 28 ,
124- bodyFontSize : config . deviceType === ' mobile' 14 : config . deviceType === ' tablet' 16 : 18 ,
125-
127+ titleFontSize : config . deviceType === " mobile" 18 : config . deviceType === " tablet" 22 : 28 ,
128+ bodyFontSize : config . deviceType === " mobile" 14 : config . deviceType === " tablet" 16 : 18 ,
129+
126130 // Spacing
127- sectionSpacing : config . deviceType === ' mobile' 16 : config . deviceType === ' tablet' 20 : 24 ,
131+ sectionSpacing : config . deviceType === " mobile" 16 : config . deviceType === " tablet" 20 : 24 ,
128132 itemSpacing : config . spacing ,
129133 } ;
130- } ;
134+ } ;
0 commit comments