Міграція веб-додатка React.js до мобільного додатка React Native з Expo - javascript.org.ua

Як веб-розробка продовжує розвиватися, розробники все більше прагнуть перенести свої веб-додатки на мобільні платформи. Якщо ви створили веб-додаток за допомогою React.js і хочете розширити свій проєкт на мобільні пристрої, React Native — чудове рішення. А за допомогою Expo цей процес стає ще більш безшовним, пропонуючи легке налаштування, тестування та розгортання мобільних додатків.

У цьому блозі я проведу вас через процес міграції вашого існуючого коду React.js на додаток React Native за допомогою Expo. Ця міграція вимагатиме деяких змін у вашому коді, особливо в частині інтерфейсу користувача, оскільки React Native і React.js мають різні підходи до обробки компонентів і стилів.

Давайте зануримося в процес!

Звісно! Ось оновлений блог з додаванням плюсів і мінусів використання React Expo.

reactjs to native

Міграція веб-додатка React.js до додатка React Native з Expo

Крок 1: Налаштування вашого нового Expo проєкту

Перед тим, як почати міграцію вашого коду React.js, потрібно налаштувати новий проєкт Expo. Expo надає простий спосіб почати роботу з додатками React Native.

Спочатку встановіть Expo CLI, якщо ви ще цього не зробили:

npm install -g expo-cli

Тепер створіть новий проєкт Expo:

expo init MyExpoApp  
cd MyExpoApp

Виберіть шаблон blank або інший, який підходить для ваших потреб.

Тепер ви готові розпочати міграцію вашого існуючого коду React.js.

Крок 2: Встановлення залежностей

Expo надає багато бібліотек з коробки, але вам потрібно буде встановити додаткові залежності, особливо для навігації та жестикуляцій:

npm install @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated

Це встановить необхідні бібліотеки для обробки навігації та жестів у вашому додатку.

Крок 3: Налаштування ваших компонентів

Одна з найбільших змін, які вам потрібно буде внести при міграції з React.js на React Native, — це налаштування ваших компонентів. React.js використовує HTML теги, такі як <div>, <span>, і <button>, але React Native має свої власні компоненти. Ось як ви можете перетворити простий компонент React.js на компонент React Native:

Компонент React.js:

const MyComponent = () => (    
  <div>Hello, World!</div>
  <button>Click me</button>    
);

Компонент React Native:

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

const MyComponent = () => (  
  <View>  
    <Text>Hello, World!</Text>  
    <Button title="Click me" onPress={() => {}} />  
  </View>  
);

Зверніть увагу на зміну з HTML тегів (<div>, <span>, і <button>) на компоненти React Native, такі як <View>, <Text>, і <Button>.

Крок 4: Заміна CSS на стилі React Native

У React.js ви зазвичай використовуєте зовнішні або вбудовані CSS для стилізації ваших компонентів. Однак у React Native ви використовуєте API StyleSheet для створення стилів на основі JavaScript.

Наприклад, CSS файл у React.js може виглядати так:

.button {    
  background-color: blue;    
  color: white;    
  padding: 10px;   
}

У React Native ви можете замінити його на:

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

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    padding: 10,
  },
});

const MyComponent = () => (  
  <View>  
    <Text>Hello World!</Text>  
    <Button title="Click me" onPress={() => {}} />  
  </View>  
);

За допомогою API StyleSheet ви можете визначати ваші стилі як об'єкти JavaScript, що забезпечує кращу продуктивність та оптимізацію в React Native.

Крок 5: Міграція вашої навігації

У React.js ви, ймовірно, використовуєте React Router для керування навігацією між сторінками.
У React Native вам потрібно використовувати React Navigation.

Встановлення React Navigation:

npm install @react-navigation/native @react-navigation/stack

Потім налаштуйте навігацію у вашому Expo додатку таким чином:

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

const Stack = createStackNavigator();function HomeScreen() {  
 return (  

 Home Screen  

 );  
}export default function App() {  
 return (  





 );  
}

За допомогою React Navigation ви можете легко перемикатися між екранами, як це робить React Router для веб-додатків.

Крок 6: Обробка специфічного коду для платформ

Додатки React Native створені для роботи на мобільних пристроях, тому вам, можливо, потрібно буде використовувати специфічний код для деяких функцій. Наприклад, ви можете захотіти відображати різні компоненти або стилі для iOS і Android.

Ви можете використовувати модуль Platform в React Native для досягнення цього:

import { Platform, Text } from 'react-native';

const MyComponent = () => (  
 {Platform.OS === 'ios' ? 'Running on iOS' : 'Running on Android'}  
);

Це відобразить різні повідомлення в залежності від того, чи працює додаток на iOS чи Android.

Крок 7: Міграція статичних ресурсів

У React.js ви зберігаєте статичні ресурси, такі як зображення, у папці public. У React Native статичні ресурси, такі як зображення, пакуються прямо в сам додаток.

Щоб використовувати зображення в React Native, ви можете звертатися до нього так:

import { Image } from 'react-native';  
import logo from './assets/logo.png';

const MyComponent = () => (  

);

Переконайтеся, що ваші ресурси знаходяться в папці assets і правильно посилаються на них у компонентах.

Крок 8: Тестування на мобільному пристрої

Після того, як ви мігрували ваш код, важливо протестувати додаток на мобільному пристрої. Expo спрощує цей процес за допомогою додатка Expo Go, який дозволяє запускати ваш додаток на будь-якому фізичному пристрої або емуляторі.

Запустіть додаток за допомогою:

expo start

Потім відскануйте QR код у Expo Go, і ваш додаток завантажиться на вашому пристрої.

Крок 9: Оптимізація для мобільних пристроїв

Оскільки React Native призначений для мобільних пристроїв, переконайтеся, що ваш додаток оптимізований для малих екранів і сенсорних взаємодій. Можливо, вам потрібно буде налаштувати макет, компоненти інтерфейсу користувача та обробку дій для забезпечення плавного досвіду на мобільних пристроях.

Використання Flexbox для макету

React Native використовує Flexbox для макетів, що спрощує створення адаптивних додатків, які працюють на всіх розмірах екранів. Переконайтеся, що ваші стилі використовують властивості flex, justifyContent та alignItems, щоб ваш інтерфейс був гнучким і адаптивним.

Крок 10: Вихід, якщо необхідно

Якщо ви виявите, що Expo не надає потрібні вам функції (наприклад, конкретні рідні модулі), вам, можливо, доведеться вийти з Expo, щоб отримати повний контроль над рідним кодом для Android і iOS. Ви можете зробити це, виконавши:

expo eject

Це дасть вам доступ до рідного коду для обох платформ, але майте на увазі, що це ускладнює процес розробки.

Плюси і мінуси використання React Expo

Плюси:

Легке налаштування: Expo надає просте налаштування і середовище розробки, що дозволяє вам розпочати роботу з React Native без необхідності налаштовувати складні інструменти.
Кросплатформна розробка: З Expo ви можете написати код один раз і розгорнути його на обох платформах iOS та Android, що значно спрощує кросплатформну розробку.
Оновлення через повітря: Expo дозволяє вам надсилати оновлення до вашого додатку без проходження через процес перевірки в магазині додатків, що заощаджує час і спрощує процес оновлень.
4.
Багатий екосистема: Expo надає великий набір вбудованих API та бібліотек, таких як камера, локація, push-повідомлення та інші, що заощаджує вам час на установку та налаштування цих функцій вручну.
Expo Go: Додаток Expo Go дозволяє вам миттєво попередньо переглянути ваш додаток на будь-якому мобільному пристрої, скануючи QR код, що робить розробку та тестування швидшими.
Не потрібно писати рідний код: З Expo вам не потрібно писати чи управляти рідним кодом, що зменшує складність процесу розробки.

Мінуси:

Обмежений доступ до рідних модулів: Хоча Expo покриває багато загальних випадків використання, якщо вам потрібно отримати доступ до спеціальних рідних модулів або просунутих рідних функцій, Expo може не підтримувати їх за замовчуванням. Вам, можливо, доведеться вийти з Expo, щоб отримати повний контроль над рідним кодом.
Більший розмір додатку: Додатки Expo зазвичай мають більший розмір файлу, оскільки вони включають багато бібліотек і залежностей за замовчуванням, навіть якщо ви не використовуєте їх усі.
Складність при виході з Expo: Хоча Expo чудово підходить для швидкого прототипування, вихід з вашого додатку для отримання більшого контролю може ускладнити процес розробки, особливо для розробників, які не знайомі з рідним кодом.
Обмеження продуктивності: У деяких випадках додатки Expo можуть не бути такими продуктивними, як повністю рідні додатки, особливо для ресурсомістких завдань, таких як ігри або складні анімації.
Проблеми з версіями: Якщо ви використовуєте сторонні бібліотеки, можуть виникнути проблеми сумісності між версією Expo і версією бібліотеки, що іноді викликає неприємні моменти.

Висновок

Міграція веб-додатка React.js до додатка React Native за допомогою Expo може здатися складною на перший погляд, але завдяки потужним інструментам Expo і багатому набору компонентів React Native, процес стає набагато простішим. Виконуючи ці кроки, ви зможете легко перенести свій веб-додаток на мобільні платформи та забезпечити безперешкодний досвід користувача на iOS та Android.

Expo пропонує багато зручностей для швидкої розробки кросплатформених додатків з меншими труднощами, але важливо зважити на плюси та мінуси, особливо якщо вам потрібен доступ до просунутих рідних функцій або оптимізації продуктивності.

Внесення необхідних змін у ваш інтерфейс користувача, навігацію та статичні ресурси дозволить вашому коду React.js перетворитися на повноцінний мобільний додаток без необхідності починати з нуля.

Успіхів у кодуванні!

Ця стаття є посібником для розробників, які прагнуть розширити свої веб-додатки на мобільні додатки, пропонуючи чіткий шлях міграції з використанням Expo, одночасно описуючи переваги та можливі обмеження цього фреймворку.

Перекладено з: Migrating a React.js Web App to a React Native App with Expo