Как сдеалать переход между экранами?

Question

[Umar Egamberdiev]

Доброго времени суток! Как правильно осуществить переход между экранами (см. картинка вов вложении)

по факту у меня получается такая фитуация

Код App/index

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

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

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>
    );
}

Answer 1

[Расул Какушев]

Ваш случай подходит под auth flow. Гляньте в доки: https://docs.expo.dev/router/reference/authentication/
Там как раз описано, как сделать так чтобы пользователь в зависимости от авторизации попадал в разные части приложения