Навигация между двумя экранами с сохранением состояния?

В React Native для реализации навигации между экранами с сохранением состояния можно использовать различные библиотеки, такие как React Navigation, React Native Navigation или React Native Router Flux. В этом ответе рассмотрим пример реализации навигации с помощью React Navigation.

React Navigation предоставляет набор интуитивно понятных компонентов и функций для создания навигации в приложении React Native. Давайте предположим, что у нас есть два экрана: "HomeScreen" и "DetailScreen". Мы хотим переключаться между этими экранами и сохранять состояние каждого экрана даже после возврата к нему.

1. Установка и настройка React Navigation:
Установите React Navigation, следуя инструкциям на официальном сайте (https://reactnavigation.org/docs/getting-started).

2. Создание компонентов экранов:
В папке с вашими компонентами создайте два экрана: "HomeScreen.js" и "DetailScreen.js". В каждом компоненте создайте простой React-компонент, например:

   // HomeScreen.js
   import React from 'react';
   import { View, Text, Button } from 'react-native';

   export default function HomeScreen({ navigation }) {
     return (
       <View>
         <Text>Home Screen</Text>
         <Button
           title="Go to Detail Screen"
           onPress={() => navigation.navigate('Details')}
         />
       </View>
     );
   }

   // DetailScreen.js
   import React from 'react';
   import { View, Text } from 'react-native';

   export default function DetailScreen() {
     return (
       <View>
         <Text>Detail Screen</Text>
       </View>
     );
   }

3. Создание навигатора и настройка навигации:
В предположении, что у вас уже есть корневой компонент приложения, вы можете создать навигатор для переключения между экранами и сохранения их состояния. В корневом компоненте добавьте следующий код:

   import { createAppContainer } from 'react-navigation';
   import { createStackNavigator } from 'react-navigation-stack';
   import HomeScreen from './HomeScreen';
   import DetailScreen from './DetailScreen';

   const AppNavigator = createStackNavigator(
     {
       Home: HomeScreen,
       Details: DetailScreen,
     },
     {
       initialRouteName: 'Home',
     }
   );

   export default createAppContainer(AppNavigator);

4. Использование навигатора:
В родительском компоненте (корневом компоненте) вашего приложения добавьте только что созданный навигатор:

   import React from 'react';
   import AppNavigator from './AppNavigator';

   export default function App() {
     return <AppNavigator />;
   }

Теперь при запуске приложения вы увидите "HomeScreen" с кнопкой "Go to Detail Screen". При нажатии на кнопку вы перейдете на экран "DetailScreen". При нажатии кнопки "Назад" на устройстве или при вызове метода navigation.goBack() в вашем коде вы вернетесь обратно на "HomeScreen".

Цель React Navigation - обеспечить сохранение состояния каждого экрана даже после перехода на другой экран и возврата обратно. Вы можете добавить любую другую функциональность, такую как передача параметров между экранами, кастомизацию заголовков и многое другое.