Установка и настройка

npx expo install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npx expo install @react-navigation/native-stack

// App.tsx
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import RootNavigator from './navigation/RootNavigator';

export default function App() {
    return (
        <SafeAreaProvider>
            <NavigationContainer>
                <RootNavigator />
            </NavigationContainer>
        </SafeAreaProvider>
    );
}

// navigation/RootNavigator.tsx
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from '../screens/HomeScreen';
import DetailsScreen from '../screens/DetailsScreen';

const Stack = createNativeStackNavigator();

export default function RootNavigator() {
    return (
        <Stack.Navigator
            initialRouteName="Home"
            screenOptions={{
                headerStyle: { backgroundColor: '#c1442e' },
                headerTintColor: '#fff',
                headerTitleStyle: { fontWeight: 'bold' },
                contentStyle: { backgroundColor: '#fafafa' },
            }}
        >
            <Stack.Screen
                name="Home"
                component={HomeScreen}
                options={{ title: 'Главная' }}
            />
            <Stack.Screen
                name="Details"
                component={DetailsScreen}
                options={{ title: 'Детали' }}
            />
        </Stack.Navigator>
    );
}

export type RootStackParamList = {
    Home: undefined;
    Details: { id: number };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

src/
├── navigation/
│   ├── RootNavigator.tsx
│   └── types.ts
├── screens/
│   ├── HomeScreen.tsx
│   └── DetailsScreen.tsx
├── components/
└── App.tsx

// navigation/types.ts
export type RootStackParamList = {
    Home: undefined;
    Details: { id: number; title?: string };
    Profile: { userId: string };
    Settings: undefined;
};

<Stack.Screen
    name="Details"
    component={DetailsScreen}
    options={{
        title: 'Детали',
        headerShown: true,
        headerBackTitle: 'Назад',
        headerRight: () => <IconButton icon="share" onPress={() => {}} />,
    }}
/>

function DetailsScreen() {
    const navigation = useNavigation();

    useLayoutEffect(() => {
        navigation.setOptions({ title: `Пост ${id}` });
    }, [id]);
}