Стендап Сьогодні
📢
Канал в Telegram @stendap_sogodni
🦣
@stendap_sogodni@shevtsov.me в Федиверсі
07.08.2025
Пʼять фактів, щоб краще зрозуміти React Native
React Native відрізняється від React тільки набором компонентів. Тож замість div буде View, замість p - Text тощо. Ці компоненти створюють справжній набір відповідних “рідних” компонент пристрою. (А якщо так подумати, то div та p в React для вебу теж не “є” тегами HTML, а тільки створюють вузли DOM - поведінка така сама.)
Все інше, що ти знаєш з React, продовжує працювати й в React Native. Власні компоненти, хуки, контексти, модель, Redux, Reselect, Axios, і так далі. Також це звичайний JS/TS. (Хіба що тулчейн буде особливий - Metro замість всього, до чого звикли в вебі.)
В React Native власна модель викладки, яка майже повторює Flexbox. Та вона нам дуже корисна, бо мобільні пристрої бувають всяких різних розмірів. В мене взагалі так вийшло, що я цей флексбокс вивчив саме в контексті React Native, в той час, як на вебі користувався старішими рішеннями. Сподобалось! На мобільний пристрій дизайнити екрани якось легше, бо вони тебе заздалегідь обмежують та нема такого відчуття великого порожнього аркуша, як на вебі.
В React Native замість CSS є структури стилів, вони нагадують CSS, але не повторюють. Також немає великої потреби в окремих таблицях стилів, на відміну від вебу можна їх без проблем задавати прямо в компоненті. В мене найкраще виходило, коли я створював шар презентаційних компонент, в яких сиділи всі стилі. (Схожим підходом і для вебу роблять.)
Треба серйозно ставитися до навігації. На відміну від вебу, де застосунок React є єдиною сторінкою, RN доводиться оперувати рідними екранами пристрою. Тому відразу варто роздивитися інструкцію по навігації та робити правильну архітектуру. А не повторювати підходи з вебу, де в тебе просто замість одного екрану малюється інший.
Майже всі мислимі можливості покриті бібліотеками. Завжди всі питають “наскільки легко інтегрувати то чи інше”. Практично завжди відповідь “на то є бібліотека!” Все те, що не входить в базовий комплект, можна знайти на NPM, наприклад: react-native-iap для підтримки покупок.