React Native - Дотичні та розміри екрану

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

Ось список двох, які допоможуть вам створити ваш наступний додаток.

Дотичні

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

React Native постачається з Buttonкомпонентом, який працює для багатьох стандартних onPressвзаємодій. За замовчуванням це дасть користувачеві зворотний зв'язок, змінивши непрозорість, щоб показати натиснуту кнопку. Використання:

Для більш складних випадків використання React Native має вбудовані API для обробки так званих взаємодій із пресою Touchables.

TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback

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

Кілька прикладів використання цих компонентів:

// with images    // with text  Hello 

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

Щоб побачити всі доступні реквізити та те, як ці компоненти працюють, ви можете подивитися вихідний код JavaScript для Touchables тут.

Розміри екрану

React Native використовує Dots Per Inch (DPI) для вимірювання розміру користувальницького інтерфейсу (UI) та всього, що відображається на UI. Цей тип вимірювань дозволяє додатку виглядати рівномірно для різних розмірів екрану та щільності пікселів.

Для стандартних випадків використання програми можна розробляти, не знаючи особливостей пристрою користувача (наприклад, щільність пікселів), оскільки елементи інтерфейсу автоматично масштабуються.

Коли це потрібно, доступні API, такі як PixelRatioдопомогти вам дізнатися щільність пікселів пристрою користувача.

Щоб отримати висоту / ширину вікна чи екрану пристрою користувача, React Native має API, який називається Dimensions.

import { Dimensions } from 'react-native';

Ось методи, які Dimensionsнадає API:

Dimensions.get('window').height; Dimensions.get('window').width; Dimensions.get('screen').height; Dimensions.get('screen').width;

Примітка: Раніше з API Dimensions було кілька відомих проблем, таких як неповернення правильної інформації, коли користувач обертає свій пристрій.Краще переконайтеся, що ви перевірили це на реальних пристроях перед розгортанням програми.

Більше інформації про адаптивний дизайн:

  • Безкоштовний курс адаптивного дизайну
  • Найкращі підручники Bootstrap для адаптивного веб-дизайну
  • Як мислимо мислити
  • Посібник з адаптивних зображень
  • Дізнайтеся адаптивний дизайн за 5 хвилин