Ось так ми створили баланс між iOS та Android за допомогою React Native

Ви користувались улюбленим додатком на своєму iPhone, а потім перейшли на Android лише для того, щоб розчаруватися у світогляді вашої програми? Ну, це саме те, що відбувається, коли компоненти інтерфейсу не однакові між операційними системами. Завдяки Джордану Уолку, інженеру програмного забезпечення у Facebook, який проаналізував процес просування та сприяв більш зручному користувальницькому досвіду для вирішення цієї проблеми за допомогою React Native.

Найкраще використовувати React Native для мобільних додатків - це те, що ви можете поділитися майже 95% своєї кодової бази на Android та iOS платформах. Ми, Pickyourtrail, любимо цю функцію, і саме тому React Native - наш вибір для створення нашого мобільного додатку.

Поглиблені уявлення про React Native

Незважаючи на те, що є платформою для розробки платформ для різних платформ, React Native використовує «рідні» компоненти iOS та Android для надання інтерфейсу програми. Це означає, що один і той же компонент може виглядати по-різному на кожній з платформ.

Щоб надати більше ясності, візьмемо компонент Button як приклад.

Ось як виглядає кнопка в iOS та Android:

Приклад кнопки з документації React Native

Досить інша правда?

Деякі компоненти настільки унікальні, що React Native потребує чіткого розділення їх, використовуючи різні назви компонентів.

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

DatePickerIOS від React Native Documentation

Однак на Android, інструмент вибору дати може використовуватися лише як асинхронна функція DatePickerAndroid, яка відкриває спливаюче вікно, яке відрізняється як функціональністю, так і користувацьким досвідом.

DatePickerAndroid Матеріал Вибір дати. Зображення з Vuescript

Чому вони такі різні?

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

Однак на Pickyourtrail нам знадобилися користувачі обох додатків для Android та iOS, щоб вони мали однаковий досвід на обох платформах. Отже, тепер на нас - створити загальні компоненти, що об'єднують обидві платформи та створюють унікальний досвід для наших користувачів!

Почнемо з компонента кнопки.

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

Зараз у нас є компонент CustomButton, який відображає незалежну від платформи кнопку в нашому додатку. Все, що нам потрібно зробити - це використовувати

Компонент CustomButton відображає подібний вигляд кнопок для Android та iOS

Потрібно більше?

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

Цікаве прочитання: Зазирнути у світ LocalStorage!

Що з такими компонентами, як DatePicker?

Однак DatePickerIOS є компонентом інтерфейсу, і DatePickerAndroid реалізується як спливаюче вікно, ідеальним підходом тут є використання Modal для вибору дати iOS. Це дозволить користувачам мати подібний досвід на обох платформах. Хороша реалізація цього є у складі компонента «Вибір реакцій», що відповідає даті.

Як пішло на Pickyourtrail?

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

Якщо ви плануєте заощадити час, не відтворюючи кожен компонент для свого проекту, ви можете просто вибрати одну з широкого спектру бібліотек компонентів, доступних для React Native, таких як NativeBase або React Native Elements. Повідомте нас у розділі коментарів нижче, якщо це вийшло для вас!

Швидке читання: Ось як ми вирішили повільні завантаження сторінок!

Шукаєте перерву після читання хороших технологій? Зайдіть і пограйте з нашим продуктом Pickyourtrail і почніть планувати свої канікули!

Про автора: Дані Акаш, наш технік з Pickyourtrail занадто серйозно сприймає кодування для мобільних телефонів та серверів. Крім того, він бореться зі сном за 10 годин читання манги. Га! Цілком експерт, чи не так?