Давайте изучим навигацию в PURE React Native System!!!

ГЛАВА I: Настройка ядра

Давайте настроим наши основные конфигурации для навигации в react native

Шаг 1: Установите «@react-navigation/native»

Прежде всего, установите основной пакет react navigation

npm install @react-navigation/native

Что теперь?

Шаг 2: Установите основные пакеты утилит

Сейчас мы установим два основных пакета утилит для нативной навигации react. Это «react-native-screens» и «react-native-safe-area-context».

(Если есть expo, установите их с помощью expo, если нет, установите их с помощью npm)

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

Теперь для чистых приложений react native пакет «react-native-screens» требует одного дополнительного шага настройки для правильной работы на устройствах Android. Это изменение необходимо для того, чтобы избежать сбоев, связанных с тем, что состояние View не сохраняется последовательно при перезапуске Activity. Что и как?

(Для PURE React Native)
Отредактируйте файл «MainActivity.java», который находится в папке «android/app/src/main/java/{Имя_вашего_пакета}/MainActivity.java». Добавьте в тело класса «MainActivity» следующий код

@Override  
protected void onCreate(Bundle savedInstanceState) {  
super.onCreate(null);  
}

И не забудьте добавить оператор «import» в верхней части этого файла

import android.os.Bundle;

Шаг 3: Обертывание нашего приложения в NavigationContainer

Наконец, давайте обернем наше приложение в NavigationContainer

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './NeiXin/screens/HomeScreen';

const App = () => {
  return (
    <NavigationContainer>
      <HomeScreen/>
    </NavigationContainer>
  );
};

export default App;

ГЛАВА II: Настройка утилиты

Давайте узнаем, как настроить навигатор ящиков и/или стеков.

Шаг 1: Установите пакеты утилит

Вам необходимо установить пакеты утилит «react-native-gesture-handler» и «react-native-reanimated». Они одинаковы для всех навигаторов (ящика, стека и вкладки)! Давайте установим их
(Если есть expo, установите их с помощью expo, если нет, установите их с помощью npm)

npm install react-native-gesture-handler react-native-reanimated

Теперь для PURE React Native Apps нам нужно поместить следующую строку в самый верх нашего входного файла (для меня это файл App.tsx). Мы должны убедиться, что она находится в самом верху и перед ней больше ничего нет

import 'react-native-gesture-handler';

Отлично, мы закончили настройку утилиты. Давайте теперь установим основные пакеты в зависимости от наших Навигаторов 🙂

Шаг 2: Конфигурация Reanimated 2

Для приложения PURE React Native вы можете получить ошибку, связанную с «Reanimated 2». Для этого нам нужно правильно его настроить. Как? Давайте посмотрим!

(для получения дополнительной информации ознакомьтесь с конфигурацией reanimated 2)

Часть 1:

В babel.config.js добавьте следующее
(ПРИМЕЧАНИЕ: плагин Reanimated должен быть указан последним)

  module.exports = {
      ...
      presets: [...],
      plugins: [
          ...
          'react-native-reanimated/plugin' //make sure this is always the last line
      ],
  };

Часть 2: Включите движок Hermes

Включите движок Hermes, отредактировав файл «android/app/build.gradle».

project.ext.react = [
  enableHermes: true  // <- here | clean and rebuild if changing
]

Часть 3: Обновление MainApplication.java

Обновите файл «android/app/main/java/{Имя_вашего_пакета}/MainApplication.java».

  import com.facebook.react.bridge.JSIModulePackage; // <- add
  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override //find these four lines, these already exist, we need to add the next 4 lines after these four lines
      protected String getJSMainModuleName() {
        return "index";
      }

      @Override //add these four lines after the above four lines
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage();
      }
    };
  ...

Вы можете обратиться к этому diff, который представляет набор вышеуказанных изменений, внесенных в свежий проект React Native.

Часть 4: Попробуйте запустить

Попробуйте запустить ваше приложение, если ошибка все еще возникает, удалите кэш с помощью этой команды

npx react-native start --reset-cache

Это перезапустит ваше приложение, удалив кэш. Теперь по желанию вы можете остановить и перезапустить приложение с помощью этой команды

npm run android

Надеюсь, это поможет 🙂

ГЛАВА III: Специфические навигаторы

Давайте научимся использовать навигаторы Drawer, Stack и Tab. Мы установим наши специфические навигаторы с помощью следующей команды

(Если навигатор Drawer)

npm install @react-navigation/drawer

(Если навигация по стеку)

Я предпочитаю этот вариант, поскольку он, как утверждается, значительно более настраиваемый

npm install @react-navigation/stack

(ИЛИ)
Я не очень люблю этот режим, потому что, как говорят, многие вещи в нем практически невозможно настроить

npm install @react-navigation/native-stack

(Если навигация по нижним вкладкам)

npm install @react-navigation/bottom-tabs

Навигация по ящику

const Drawer = createDrawerNavigator();
function RootDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home Page" component={HomeScreen}/>
      <Drawer.Screen name="About Page" component={AboutScreen}/>
    </Drawer.Navigator>
  )
}

Навигация по стопке

const Stack = createStackNavigator();
function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home Page" component={HomeScreen}/>
      <Stack.Screen name="About Page" component={AboutScreen}/>
    </Stack.Navigator>
  )
}

Навигация по нижним вкладкам

const Tab = createBottomTabNavigator();
function RootBottomTab() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home Page" component={HomeScreen}/>
      <Tab.Screen name="About Page" component={AboutScreen}/>
    </Tab.Navigator>
  )
}

Что дальше?

1. Асинхронное хранение данных с помощью чистого React Native

2. Проект с Pure React Native

3. Подробнее о разработке приложений

4. Как развернуть приложение в playstore

5. Безумные вещи с JavaScript/TypeScript

6. Написание автоматических тестов для любого сервера

7. Как создать Android APP без XP с помощью Expo

(включая генерацию apk)

Есть сомнения?

Оставьте комментарий или свяжитесь со мной @SilveLEAF в Twitter или Linkedin.

Хотите узнать обо мне больше? Заходите сюда!
SilvenLEAF.github.io