Начало работы¶

Далее в разделе Фундаментальные основы данной документации представлен обзор наиболее важных аспектов React Navigation. Этого будет достаточно, чтобы понять, как построить типичное небольшое мобильное приложение, и дать вам основу, необходимую для более глубокого погружения в более сложные части React Navigation.

Предварительные условия¶

Если вы уже знакомы с JavaScript, React и React Native, то вы сможете быстро освоить React Navigation! Если же нет, то мы настоятельно рекомендуем сначала получить базовые знания, а затем вернуться сюда, когда все будет готово.

Вот некоторые ресурсы, которые могут вам помочь:

1. React Native Express (разделы с 1 по 4)

2. Основные концепции React

3. React Hooks

4. React Context (Дополнительно)

Минимальные требования¶

• react-native >= 0.63.0

• expo >= 41 (если вы используете Expo)

• typescript >= 4.1.0 (если вы используете TypeScript)

Установка¶

Установите необходимые пакеты в ваш проект React Native:

1

npm install @react-navigation/native

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

Сейчас мы установим библиотеки react-native-screens и react-native-safe-area-context. Если эти библиотеки у вас уже установлены и имеют последнюю версию, то вы закончили! В противном случае читайте дальше.

Установка зависимостей в проект, управляемый Expo¶

В каталоге проекта выполните команду:

1

npx expo install react-native-screens react-native-safe-area-context

В результате будут установлены совместимые версии этих библиотек.

Теперь вы можете перейти к "Hello React Navigation", чтобы начать писать код.

Установка зависимостей в пустой проект React Native¶

В каталоге проекта выполните команду:

1

npm install react-native-screens react-native-safe-area-context

Начиная с версии React Native 0.60 и выше, связывание происходит автоматически. Поэтому не нужно запускать react-native link.

Если вы работаете на Mac и разрабатываете под iOS, то для завершения линковки вам необходимо установить капсулы (через Cocoapods).

1

npx pod-install ios

Для корректной работы пакета react-native-screens на устройствах под управлением ОС Android требуется выполнить еще один шаг настройки. Отредактируйте файл MainActivity.java, расположенный в каталоге android/app/src/main/java/<имя вашего пакета>/MainActivity.java.

Добавьте выделенный код в тело класса MainActivity:

1
2
3
4
5
6
7
8

public class MainActivity extends ReactActivity {
  // ...
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
  // ...
}

и обязательно добавьте следующий оператор import в верхней части этого файла под оператором package:

1

import android.os.Bundle;

Это изменение необходимо для предотвращения сбоев, связанных с тем, что состояние представления не сохраняется последовательно при перезапуске Activity.

Обертывание приложения в NavigationContainer¶

Теперь необходимо обернуть все приложение в NavigationContainer. Обычно это делается во входном файле, таком как index.js или App.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
    return (
        <NavigationContainer>
            {/* Rest of your app code */}
        </NavigationContainer>
    );
}

Теперь вы готовы к сборке и запуску приложения на устройстве/симуляторе.

Перейдите к "Hello React Navigation", чтобы начать писать код.

Ссылки¶

• Getting started

Комментарии