feat: 添加page示例

README.md

@@ -110,7 +110,7 @@ rn-demo/
 │   │   ├── demo.tsx                # 完整示例页面 🎯
 │   │   ├── paper.tsx               # React Native Paper 示例
 │   │   └── _layout.tsx             # 标签布局
-│   ├── test-page.tsx               # 测试页面（无 tabs）🎯
+│   ├── test.tsx                    # 测试页面（无 tabs）🎯
 │   ├── _layout.tsx                 # 根布局 - 自动检查更新 ⭐
 │   ├── modal.tsx                   # 模态页面示例
 │   ├── +html.tsx                   # Web HTML 模板
@@ -223,7 +223,7 @@ rn-demo/
 - **`app/_layout.tsx`** - 应用启动时自动检查更新
 - **`app/(tabs)/index.tsx`** - 热更新演示页面
 - **`app/(tabs)/demo.tsx`** - 完整示例页面，展示所有工具的使用 🎯
-- **`app/test-page.tsx`** - 测试页面示例（不包含底部 tabs）🎯
+- **`app/test.tsx`** - 测试页面示例（不包含底部 tabs）🎯
 
 #### 💻 业务代码目录（扁平化结构）🎯
 

app/(tabs)/demo.tsx

@@ -298,7 +298,7 @@ export default function DemoScreen() {
             style={[styles.button, styles.primaryButton]}
             onPress={() => {
               haptics.light();
-              router.push('/test-page');
+              router.push('/test');
             }}
           >
             <Text style={styles.buttonText}>跳转到测试页面 →</Text>

app/test.tsx

@@ -0,0 +1,2 @@
+import { TestPage } from '@/pages';
+export default TestPage;

pages/TestPage/index.tsx

@@ -1,12 +1,13 @@
-import { StyleSheet, ScrollView } from 'react-native';
+import { ScrollView } from 'react-native';
 import { Stack, useRouter } from 'expo-router';
 import { ThemedText, ThemedView } from '@/components';
+import { styles } from './styles';
 
 /**
  * 测试页面
- * 
+ *
  * 这是一个独立的业务页面示例，不包含底部 tabs
- * 
+ *
  * 特点：
  * - 带有返回按钮的 header
  * - 不包含底部导航栏
@@ -79,41 +80,3 @@ export default function TestPage() {
     </>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  content: {
-    padding: 20,
-  },
-  title: {
-    marginBottom: 16,
-  },
-  description: {
-    marginBottom: 24,
-    lineHeight: 24,
-  },
-  section: {
-    marginBottom: 24,
-  },
-  item: {
-    marginTop: 8,
-    marginLeft: 8,
-    lineHeight: 24,
-  },
-  infoBox: {
-    padding: 16,
-    borderRadius: 8,
-    backgroundColor: 'rgba(0, 122, 255, 0.1)',
-    marginTop: 8,
-  },
-  infoText: {
-    marginTop: 8,
-    lineHeight: 22,
-  },
-});
-

pages/TestPage/styles.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  content: {
+    padding: 20,
+  },
+  title: {
+    marginBottom: 16,
+  },
+  description: {
+    marginBottom: 24,
+    lineHeight: 24,
+  },
+  section: {
+    marginBottom: 24,
+  },
+  item: {
+    marginTop: 8,
+    marginLeft: 8,
+    lineHeight: 24,
+  },
+  infoBox: {
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: 'rgba(0, 122, 255, 0.1)',
+    marginTop: 8,
+  },
+  infoText: {
+    marginTop: 8,
+    lineHeight: 22,
+  },
+});

pages/index.ts

@@ -0,0 +1,36 @@
+/**
+ * pages 统一导出
+ *
+ * 这个目录用于存放复杂的业务页面组件
+ *
+ * 目录结构建议：
+ * pages/
+ * ├── index.ts                    # 统一导出
+ * ├── TestPage/                 # 测试页面
+ * │   ├── index.tsx              # 页面主组件
+ * │   ├── components/            # 页面私有组件
+ * │   └── styles.ts              # 页面样式
+ * ├── ProfilePage/             # 个人资料页面
+ * └── SettingsPage/            # 设置页面
+ *
+ * 使用方式：
+ * 1. 在 pages/ 目录下创建页面组件
+ * 2. 在 app/ 目录下创建路由文件，引用 pages/ 中的组件
+ * 3. 从这里统一导出，方便管理
+ *
+ * 示例：
+ * ```typescript
+ * // pages/TestPage/index.tsx
+ * export default function TestPage() {
+ *   return <View>...</View>;
+ * }
+ *
+ * // app/test.tsx
+ * import TestPage from '@/pages/TestPage';
+ * export default TestPage;
+ * ```
+ */
+
+// 导出业务页面组件
+export { default as TestPage } from './TestPage';
+

screens/index.ts

@@ -1,36 +0,0 @@
-/**
- * Screens 统一导出
- * 
- * 这个目录用于存放复杂的业务页面组件
- * 
- * 目录结构建议：
- * screens/
- * ├── index.ts                    # 统一导出
- * ├── TestScreen/                 # 测试页面
- * │   ├── index.tsx              # 页面主组件
- * │   ├── components/            # 页面私有组件
- * │   └── styles.ts              # 页面样式
- * ├── ProfileScreen/             # 个人资料页面
- * └── SettingsScreen/            # 设置页面
- * 
- * 使用方式：
- * 1. 在 screens/ 目录下创建页面组件
- * 2. 在 app/ 目录下创建路由文件，引用 screens/ 中的组件
- * 3. 从这里统一导出，方便管理
- * 
- * 示例：
- * ```typescript
- * // screens/TestScreen/index.tsx
- * export default function TestScreen() {
- *   return <View>...</View>;
- * }
- * 
- * // app/test.tsx
- * import TestScreen from '@/screens/TestScreen';
- * export default TestScreen;
- * ```
- */
-
-// 当前暂无导出，等待添加业务页面组件
-export {};
-