屏幕适配方案1.0

app/components/IconComponent.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Ionicons } from '@expo/vector-icons';
+
+interface IconComponentProps {
+  name: string;
+  size: number;
+  color: string;
+}
+
+const IconComponent: React.FC<IconComponentProps> = ({ name, size, color }) => {
+  return <Ionicons name={name as any} size={size} color={color} />;
+};
+
+export default IconComponent; 

app/screens/LoginScreen.tsx

@@ -952,7 +952,7 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     color: '#000',
     textAlign: 'center',
-    marginRight: 36, // 为了让标题真正居中
+    marginRight: 36,
   },
   emailLoginContent: {
     padding: 20,
@@ -1074,7 +1074,7 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     color: '#000',
     textAlign: 'center',
-    marginRight: 36, // 为了让标题真正居中
+    marginRight: 36,
   },
   phoneLoginContent: {
     padding: 20,
@@ -1194,7 +1194,7 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: '600',
     textAlign: 'center',
-    marginRight: 24, // Balance with close button
+    marginRight: 24,
   },
   countryList: {
     padding: 8,

app/screens/SearchResultScreen.tsx

@@ -776,7 +776,7 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   categoryText: {
-    fontSize: 10,
+    fontSize: 14,
     color: "#000000",
     fontWeight: "600",
     marginBottom: 4,
@@ -788,29 +788,29 @@ const styles = StyleSheet.create({
     marginBottom: 4,
   },
   currentPrice: {
-    fontSize: 14,
+    fontSize: 24,
     fontWeight: "600",
     color: "#ff6600",
     marginRight: 4,
   },
   currency: {
-    fontSize: 10,
+    fontSize: 15,
     fontWeight: "600",
     fontFamily: 'PingFang SC',
   },
   originalPrice: {
-    fontSize: 10,
+    fontSize: 14,
     color: "#999",
     textDecorationLine: "line-through",
   },
   currencySmall: {
-    fontSize: 10,
+    fontSize: 16,
     color: '#9a9a9a',
     fontWeight: "600",
     fontFamily: 'PingFang SC',
   },
   productSales: {
-    fontSize: 10,
+    fontSize: 16,
     fontWeight: "600",
     fontFamily: 'PingFang SC', 
     color: "#7c7c7c",

app/utils/size.ts

@@ -1 +1,29 @@
- 
+import { Dimensions } from 'react-native';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+// 设计稿尺寸
+const DESIGN_WIDTH = 430;
+const DESIGN_HEIGHT = 932;
+
+// 计算缩放比例
+const widthScale = SCREEN_WIDTH / DESIGN_WIDTH;
+const heightScale = SCREEN_HEIGHT / DESIGN_HEIGHT;
+
+// 创建尺寸转换函数
+export const size = {
+  // 宽度适配
+  w: (width: number) => width * widthScale,
+  // 高度适配
+  h: (height: number) => height * heightScale,
+  // 字体大小适配
+  f: (fontSize: number) => fontSize * widthScale,
+  // 边距适配
+  m: (margin: number) => margin * widthScale,
+  // 圆角适配
+  r: (radius: number) => radius * widthScale,
+  // 获取屏幕宽度
+  screenWidth: SCREEN_WIDTH,
+  // 获取屏幕高度
+  screenHeight: SCREEN_HEIGHT,
+};