From f551a26a0a3f4a0a2bf9c9d2a70120fc89687ba0 Mon Sep 17 00:00:00 2001 From: echo Date: Thu, 6 Nov 2025 22:48:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0page=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +- app/(tabs)/demo.tsx | 2 +- app/test.tsx | 2 + app/test-page.tsx => pages/TestPage/index.tsx | 45 ++----------------- pages/TestPage/styles.ts | 38 ++++++++++++++++ pages/index.ts | 36 +++++++++++++++ screens/index.ts | 36 --------------- 7 files changed, 83 insertions(+), 80 deletions(-) create mode 100644 app/test.tsx rename app/test-page.tsx => pages/TestPage/index.tsx (83%) create mode 100644 pages/TestPage/styles.ts create mode 100644 pages/index.ts delete mode 100644 screens/index.ts diff --git a/README.md b/README.md index 8fe1ec8..0416cee 100644 --- a/README.md +++ b/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）🎯 #### 💻 业务代码目录（扁平化结构）🎯 diff --git a/app/(tabs)/demo.tsx b/app/(tabs)/demo.tsx index f17f6d6..af28749 100644 --- a/app/(tabs)/demo.tsx +++ b/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'); }} > 跳转到测试页面 → diff --git a/app/test.tsx b/app/test.tsx new file mode 100644 index 0000000..6b4ac10 --- /dev/null +++ b/app/test.tsx @@ -0,0 +1,2 @@ +import { TestPage } from '@/pages'; +export default TestPage; diff --git a/app/test-page.tsx b/pages/TestPage/index.tsx similarity index 83% rename from app/test-page.tsx rename to pages/TestPage/index.tsx index 72fb8a1..956987c 100644 --- a/app/test-page.tsx +++ b/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, - }, -}); - diff --git a/pages/TestPage/styles.ts b/pages/TestPage/styles.ts new file mode 100644 index 0000000..5c95dd1 --- /dev/null +++ b/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, + }, +}); diff --git a/pages/index.ts b/pages/index.ts new file mode 100644 index 0000000..d87a6de --- /dev/null +++ b/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 ...; + * } + * + * // app/test.tsx + * import TestPage from '@/pages/TestPage'; + * export default TestPage; + * ``` + */ + +// 导出业务页面组件 +export { default as TestPage } from './TestPage'; + diff --git a/screens/index.ts b/screens/index.ts deleted file mode 100644 index b9b7410..0000000 --- a/screens/index.ts +++ /dev/null @@ -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 ...; - * } - * - * // app/test.tsx - * import TestScreen from '@/screens/TestScreen'; - * export default TestScreen; - * ``` - */ - -// 当前暂无导出，等待添加业务页面组件 -export {}; -