安装命令
npx skills add https://github.com/jchaselubitz/drill-app --skill expo-router🇨🇳中文介绍
Expo Router 模式
栈导航器配置
根布局设置
在 Stack 组件上使用 screenOptions 为所有屏幕设置默认值。不要显式列出每个屏幕——路由会根据文件结构自动发现。
// app/_layout.tsx
import { Stack } from 'expo-router';
export default function RootLayout() {
return (
<Stack screenOptions={{ headerShown: false }} />
);
}
单屏幕配置
各个屏幕在其组件文件内使用 <Stack.Screen> 配置自己的选项：
// app/lesson/[id].tsx
import { Stack } from 'expo-router';
export default function LessonScreen() {
return (
<View>
<Stack.Screen
options={{
title: 'Lesson',
headerShown: true,
headerBackTitle: 'Back',
}}
/>
{/* 屏幕内容 */}
</View>
);
}
动态头部配置
使用 useNavigation 配合 setOptions 来实现动态头部内容，例如按钮：
🇺🇸English
Expo Router Patterns
Stack Navigator Configuration
Root Layout Setup
Use screenOptions on the Stack component to set defaults for all screens. Do NOT explicitly list every screen - routes are auto-discovered from the file structure.
// app/_layout.tsx
import { Stack } from 'expo-router';
export default function RootLayout() {
return (
<Stack screenOptions={{ headerShown: false }} />
);
}
Per-Screen Configuration
Individual screens configure their own options using <Stack.Screen> within the component file:
// app/lesson/[id].tsx
import { Stack } from 'expo-router';
export default function LessonScreen() {
return (
<View>
<Stack.Screen
options={{
title: 'Lesson',
headerShown: true,
headerBackTitle: 'Back',
}}
/>
{/* Screen content */}
</View>
);
}
Dynamic Header Configuration
Use useNavigation with for dynamic header content like buttons:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
