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 използва точки на инч (DPI) за измерване на размера на потребителския интерфейс (UI) и всичко, което се показва на потребителския интерфейс. Този тип измерване позволява на приложението да изглежда еднакво при различни размери на екрана и плътност на пикселите.

За стандартни случаи на използване приложенията могат да се разработват, без да се налага да се знае спецификата на потребителското устройство (например плътност на пикселите), тъй като елементите на потребителския интерфейс ще се мащабират автоматично.

Когато е необходимо, има налични API, които PixelRatioда ви помогнат да разберете плътността на пикселите на потребителското устройство.

За да получите височината / ширината на прозореца или екрана на потребителското устройство, React Native има API, наречен Dimensions.

import { Dimensions } from 'react-native';

Ето методите, които DimensionsAPI предоставя:

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

Забележка: В миналото имаше известни проблеми с API за размери, като например не връщането на правилната информация, когато потребителят завърти устройството си.Най-добре е да сте сигурни, че сте тествали това на действителни устройства, преди да внедрите приложение.

Повече информация за адаптивния дизайн:

  • Безплатен курс за отзивчив дизайн
  • Най-добрите уроци за Bootstrap за отзивчив уеб дизайн
  • Как да мислим отзивчиво
  • Ръководство за отзивчиви изображения
  • Научете отзивчивия дизайн за 5 минути