rn-navigation
Построение навигации Expo Router
Приложения React Native требуют правильной архитектуры навигации для таб-баров, модальных окон и глубоких ссылок. Этот навык предоставляет проверенные паттерны Expo Router для производственных приложений.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «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.
Ожидаемый результат:
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>
)
}
Использование «rn-navigation». Set up deep links so that myapp://messages/123 opens the chat screen for conversation 123
Ожидаемый результат:
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>
)
}
Аудит безопасности
Низкий рискDocumentation-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.
Оценка качества
Что вы можете построить
Мобильный разработчик создаёт новое приложение
Настройка структуры навигации для нового приложения Expo с вкладками, стеками и глубокими ссылками по производственным паттернам.
Команда добавляет сложную навигацию
Рефакторинг существующей навигации для поддержки модальных окон, вложенных маршрутов и правильной конфигурации глубоких ссылок.
Разработчик отлаживает проблемы навигации
Диагностика проблем состояния навигации, сбоев обработки глубоких ссылок или проблем рендеринга таб-бара.
Попробуйте эти промпты
Создайте структуру навигации Expo Router для приложения React Native с таб-баром, содержащим экраны Home, Profile и Settings. Включите вложенный стек для Settings с параметрами уведомлений и конфиденциальности.
Настройте глубокие ссылки для приложения Expo, чтобы custom URL scheme://profile/settings открывал стек Settings на экране Privacy. Покажите необходимую конфигурацию в app.json и реализацию хука linking.
Реализуйте паттерн модального представления с Expo Router, где модальное окно выдвигается снизу с размытием фона. Включите правильное закрытие с поддержкой жестов.
Реализуйте сохранение состояния навигации с использованием AsyncStorage, чтобы пользователи возвращались к точному положению экрана после перезапуска приложения. Обработайте логику восстановления для вложенного состояния навигации.
Лучшие практики
- Используйте соглашение о папках (group) для организации навигационных стеков и управления общими макетами
- Настройте префиксы глубоких ссылок на раннем этапе, чтобы избежать проблем с разрешением путей в production
- Тестируйте нави��ацию как на iOS, так и на Android, поскольку поведение жестов различается между платформами
Избегать
- Избегайте смешивания React Navigation и Expo Router в одном приложении
- Не хардкодьте URL глубоких ссылок в компонентах; используйте динамическую генерацию путей
- Избегайте глубоких мутаций состояния навигации без правильных границ ошибок