Как реализовать навигацию — переходы по компонентам?

В React Native навигация между компонентами может быть реализована с использованием различных библиотек и подходов. Вот несколько популярных способов:

1. React Navigation:
React Navigation - это полнофункциональная библиотека навигации, которая предлагает широкий набор возможностей для создания навигации в React Native. Она поддерживает стековую навигацию, табличную навигацию, шторочные меню и навигацию по сайдбару. Для использования React Navigation необходимо установить пакет @react-navigation/native, а затем выбрать и добавить необходимые навигаторы (например, @react-navigation/stack для стековой навигации) и экраны в зависимости от ваших потребностей. Подробная документация для React Navigation доступна на официальном сайте.

Пример использования React Navigation для реализации стековой навигации:

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

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

export default createAppContainer(AppNavigator);

2. React Native Navigation (Wix):
React Native Navigation - это нативная навигационная библиотека для React Native, разработанная командой Wix. Она предлагает высокую производительность и позволяет использовать нативные компоненты навигации на каждой платформе. Для использования React Native Navigation необходимо установить пакет react-native-navigation, а затем добавить настройки навигации в файле index.js. Подробную документацию можно найти на GitHub.

Пример использования React Native Navigation для реализации стековой навигации:

import { Navigation } from 'react-native-navigation';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

Navigation.registerComponent('Home', () => HomeScreen);
Navigation.registerComponent('Details', () => DetailsScreen);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'Home',
            },
          },
        ],
      },
    },
  });
});

3. React Router Native:
React Router Native - это маршрутизационная библиотека, адаптированная для использования в React Native. Она основана на популярной библиотеке React Router для веб-приложений. React Router Native предлагает навигацию с использованием компонента Switch, Route и Link. Для использования React Router Native необходимо установить пакет react-router-native. Документация со множеством примеров доступна на GitHub.

Пример использования React Router Native для реализации навигации:

import React from 'react';
import { NativeRouter, Route, Link } from 'react-router-native';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const App = () => (
  <NativeRouter>
    <Link to="/home">Home</Link>
    <Link to="/details">Details</Link>

    <Route exact path="/home" component={HomeScreen} />
    <Route path="/details" component={DetailsScreen} />
  </NativeRouter>
);

export default App;

Кроме вышеуказанных библиотек существует и другие варианты для реализации навигации в React Native. Выбор подходящей библиотеки зависит от ваших потребностей и уровня опыта.