Как сделать навигацию в React Native без сохранения истории?

Для создания навигации без сохранения истории в React Native можно использовать библиотеку React Navigation и ее StackNavigator.

Сначала установите необходимые пакеты, выполнив команду:

npm install @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Затем установите React Navigation Stack, выполнив команду:

npm install @react-navigation/stack

Импортируйте необходимые модули:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

Создайте компоненты для каждой страницы вашего приложения. Например:

import React from 'react';
import { View, Text } from 'react-native';

const HomeScreen = () => {
  ...
};

const ProfileScreen = () => {
  ...
};

Инициализируйте навигацию, создавая стековый навигатор:

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false, // скрывает заголовок
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

В этом примере у нас две страницы - HomeScreen и ProfileScreen. Мы скрываем заголовок для каждого экрана, установив headerShown: false.

Теперь чтобы перейти на другую страницу, который не сохраняет историю, вы можете использовать функцию navigate в компоненте.

import React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const HomeScreen = () => {
  const navigation = useNavigation();

  const goToProfile = () => {
    navigation.navigate('Profile');
  };

  return (
    <View>
      <Button title="Go to Profile" onPress={goToProfile} />
    </View>
  );
};

export default HomeScreen;

Таким образом, при нажатии на кнопку "Go to Profile" будет выполнен навигационный переход на экран Profile, не сохраняя историю переходов.

Это основной способ реализации навигации без сохранения истории в React Native с использованием библиотеки React Navigation Stack.