rn-navigation
构建 Expo Router 导航
React Native 应用需要适当的导航架构来支持标签栏、模态框和深度链接。本技能提供经过验证的 Expo Router 生产应用模式。
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "rn-navigation". Create an app with bottom tabs for Feed, Search, and Profile. Add a FAB button in the center that opens a Compose modal.
Resultado esperado:
Use the Expo Router directory structure:
app/
├── _layout.tsx # Root layout with providers
├── (app)/
│ └── _layout.tsx # Tab layout with tabBar
├── (app)/_layout.tsx:
export default function AppLayout() {
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: '#007AFF',
headerShown: false,
}}>
<Tabs.Screen name="feed" />
<Tabs.Screen name="search" />
<Tabs.Screen
name="compose"
href={{ pathname: '/compose', params: { modal: true } }}
listeners={{ tabPress: (e) => e.preventDefault() }}
/>
<Tabs.Screen name="profile" />
</Tabs>
)
}
A utilizar "rn-navigation". Set up deep links so that myapp://messages/123 opens the chat screen for conversation 123
Resultado esperado:
In app.json:
{
"expo": {
"scheme": "myapp",
"plugins": [
[
"expo-router",
{ "origin": "myapp://" }
]
]
}
}
In app/_layout.tsx or index.tsx:
const linking = {
prefixes: ['myapp://', 'https://myapp.com'],
config: {
screens: {
'(app)': {
screens: {
messages: {
path: 'messages/:conversationId',
parse: {
conversationId: (conversationId) => conversationId
}
}
}
}
}
}
}
export default function RootLayout() {
return (
<GestureHandlerRootView>
<SafeAreaProvider>
<NavigationContainer linking={linking}>
<Stack />
</NavigationContainer>
</SafeAreaProvider>
</GestureHandlerRootView>
)
}
Auditoria de Segurança
Baixo RiscoDocumentation-only skill for React Native navigation patterns. Static findings are false positives: backtick patterns are markdown code formatting, cryptographic alerts are scanner noise on text patterns, and URLs are legitimate metadata. No executable code or security concerns detected.
Pontuação de qualidade
O Que Você Pode Construir
构建新应用的移动开发者
按照生产模式为新的 Expo 应用设置导航结构，包括标签栏、栈和深度链接。
添加复杂导航的团队
重构现有导航以支持模态框、嵌套路由和适当的深度链接配置。
调试导航问题的开发者
诊断导航状态问题、深度链接处理失败或标签栏渲染问题。
Tente Estes Prompts
为 React Native 应用创建 Expo Router 导航结构，包含带有主屏、个人资料和设置屏幕的标签栏。为设置添加带有通知和隐私选项的嵌套栈。
为 Expo 应用配置深度链接，使自定义 URL scheme://profile/settings 打开设置栈到隐私屏幕。显示 app.json 中的必要配置和链接钩子实现。
使用 Expo Router 实现模态框展示模式，模态框从底部滑动出现并带有背景模糊。包含手势支持的正确关闭功能。
使用 AsyncStorage 实现导航状态持久化，使用户在应用重启后返回到完全相同的屏幕位置。处理嵌套导航状态的恢复逻辑。
Melhores Práticas
- 使用 (group) 文件夹约定来组织导航栈和管理共享布局
- 尽早配置深度链接前缀以避免生产中的路径解析问题
- 在 iOS 和 Android 上测试导航，因为手势行为在不同平台之间有所不同
Evitar
- 避免在同一应用中混合使用 React Navigation 和 Expo Router
- 不要在组件中硬编码深度链接 URL；使用动态路径生成
- 避免在没有适当错误边界的情况下进行深度导航状态变更