Как правильно осуществить переход между экранами в Expo Router
Доброго времени суток! У меня возникла проблема с реализацией переходов между экранами (смотрите вложение с изображением). Текущая конфигурация кода приводит к некорректному поведению навигации. Ниже приведены фрагменты кода и описание проблемы.
Текущая структура приложения
Приложение включает три основных файла:
App/index.tsx- главный экран (Home).Auth/index.tsx- экран авторизации (Auth).Auth/_layout.tsx- лейаут для группы экранов Auth.
Код App/index.tsx
import { Link, Stack, router } from 'expo-router';
import { Button, StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<>
<Stack.Screen options={{headerShown: false}} />
<View style={styles.container}>
<Text>Home page</Text>
<Button onPress={() => router.push('auth')} title='Go Auth' />
</View>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});Код Auth/index.tsx
import { Button, StyleSheet, Text, View } from 'react-native';
import { useRouter } from 'expo-router';
export default function App() {
const router = useRouter();
return (
<View style={styles.container}>
<Text>Auth page</Text>
<Button onPress={() => router.push('auth/about')} title='Go About' />
<Button onPress={() => router.back()} title='Go Back' />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});Код Auth/_layout.tsx
import React from 'react';
import { View, Text } from 'react-native';
import { Stack, useRouter } from 'expo-router';
export default function _layout() {
return (
<Stack>
<Stack.Screen name='index' options={{headerTitle: 'Auth'}} />
<Stack.Screen name='about' options={{headerTitle: 'About'}} />
</Stack>
);
}Описание проблемы
Фактическое поведение навигации не соответствует ожидаемому: переход между экранами происходит некорректно. В частности, возникают следующие вопросы:
- Правильно ли организована структура файлов и маршрутов?
- Как корректно использовать
router.pushдля перехода на экраны внутри группыAuth? - Почему
router.back()может не возвращать на предыдущий экран?
Предполагаемые решения
Для исправления навигации рекомендуется:
- Убедиться, что маршрут 'auth' зарегистрирован в корневом лейауте или используется правильная структура вложенных маршрутов.
- Использовать
router.push('/(auth)/about')илиrouter.push('/auth/about')в зависимости от схемы маршрутизации. - Проверить, что
Auth/_layout.tsxэкспортируется как дефолтный компонент и находится в правильной директории.
Более детальная диагностика требует анализа полной конфигурации проекта и файла app/_layout.tsx (если он существует).