83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
import { ScrollView } from 'react-native';
|
||
import { Stack, useRouter } from 'expo-router';
|
||
import { ThemedText, ThemedView } from '@/components';
|
||
import { styles } from './styles';
|
||
|
||
/**
|
||
* 测试页面
|
||
*
|
||
* 这是一个独立的业务页面示例，不包含底部 tabs
|
||
*
|
||
* 特点：
|
||
* - 带有返回按钮的 header
|
||
* - 不包含底部导航栏
|
||
* - 可以作为业务页面的模板
|
||
*/
|
||
export default function TestPage() {
|
||
const router = useRouter();
|
||
|
||
return (
|
||
<>
|
||
{/* 配置页面 header */}
|
||
<Stack.Screen
|
||
options={{
|
||
title: '测试页面',
|
||
headerShown: true,
|
||
headerBackTitle: '返回',
|
||
}}
|
||
/>
|
||
|
||
<ThemedView style={styles.container}>
|
||
<ScrollView style={styles.scrollView}>
|
||
<ThemedView style={styles.content}>
|
||
<ThemedText type="title" style={styles.title}>
|
||
测试页面
|
||
</ThemedText>
|
||
|
||
<ThemedText style={styles.description}>
|
||
这是一个独立的业务页面示例，展示了如何创建不包含底部 tabs 的页面。
|
||
</ThemedText>
|
||
|
||
<ThemedView style={styles.section}>
|
||
<ThemedText type="subtitle">页面特点</ThemedText>
|
||
<ThemedText style={styles.item}>✅ 带有返回按钮的 header</ThemedText>
|
||
<ThemedText style={styles.item}>✅ 不包含底部导航栏</ThemedText>
|
||
<ThemedText style={styles.item}>✅ 支持主题切换</ThemedText>
|
||
<ThemedText style={styles.item}>✅ 可以作为业务页面模板</ThemedText>
|
||
</ThemedView>
|
||
|
||
<ThemedView style={styles.section}>
|
||
<ThemedText type="subtitle">使用场景</ThemedText>
|
||
<ThemedText style={styles.item}>• 详情页面</ThemedText>
|
||
<ThemedText style={styles.item}>• 表单页面</ThemedText>
|
||
<ThemedText style={styles.item}>• 设置页面</ThemedText>
|
||
<ThemedText style={styles.item}>• 其他业务页面</ThemedText>
|
||
</ThemedView>
|
||
|
||
<ThemedView style={styles.section}>
|
||
<ThemedText type="subtitle">路由说明</ThemedText>
|
||
<ThemedText style={styles.item}>
|
||
文件路径: app/test-page.tsx
|
||
</ThemedText>
|
||
<ThemedText style={styles.item}>
|
||
访问路径: /test-page
|
||
</ThemedText>
|
||
<ThemedText style={styles.item}>
|
||
跳转方式: router.push('/test-page')
|
||
</ThemedText>
|
||
</ThemedView>
|
||
|
||
<ThemedView style={styles.infoBox}>
|
||
<ThemedText type="defaultSemiBold">💡 提示</ThemedText>
|
||
<ThemedText style={styles.infoText}>
|
||
对于复杂的业务页面，建议在 screens/ 目录下创建独立的组件，
|
||
然后在 app/ 目录下的路由文件中引用。
|
||
</ThemedText>
|
||
</ThemedView>
|
||
</ThemedView>
|
||
</ScrollView>
|
||
</ThemedView>
|
||
</>
|
||
);
|
||
}
|