Если у вас есть опыт создания динамических пользовательских интерфейсов веб-приложений, вы, вероятно, знакомы с внешней средой JavaScript React. React чрезвычайно мощный и простой в использовании, он делает создание современных веб-приложений действительно элегантным процессом.
Привыкнув к кодированию в React, вы, возможно, захотите использовать React для разработки всех видов приложений, помимо интерфейсных веб-приложений. К счастью для вас, React Native был создан для того, чтобы вы могли создавать знакомые приложения React JS, которые работают как собственные приложения на мобильных платформах, таких как iOS и Android.
Взгляните на несколько онлайн-руководств по React Native, и вы увидите, насколько они знакомы. Если вы опытный разработчик React, кривая обучения довольно проста, поскольку вы все еще в основном разрабатываете приложение на основе javascript на основе компонентов.
Есть одно важное различие между React Native и веб-реализацией ReactDOM, к которой вы, возможно, привыкли: JSX of React native не использует обычный HTML. Вместо этого все элементы реализуются с использованием определенных предварительно созданных« основных компонентов », которые движок React Native переводит непосредственно в элементы пользовательского интерфейса собственной мобильной ОС.
У этих компонентов есть собственная внутренняя логика, требующая определенных свойств с информацией, необходимой для правильной работы. Аналогичный компонент существует практически для любого элемента HTML5, который вы, возможно, использовали для дизайна / макета пользовательского интерфейса, и нетрудно преобразовать jsx-файл reactDOM в функциональную версию Native. Специфика Native Core Components и их дочерних компонентов делает среду гораздо более самоуверенной и менее разнообразной, что можно рассматривать как хорошее или плохое в зависимости от ваших предпочтений и предыдущего опыта программирования.
Компонент представления
В возвращаемом значении компонента React Native наиболее фундаментальной единицей, которую вы будете использовать, является компонент представления. Думайте о <View> как о эквиваленте <div> в обычном react jsx.
Вы, вероятно, будете помещать весь свой компонент в контейнер представления, а также дополнительные контейнеры представления для определенных разделов компонента. Контейнеры просмотра позволяют вам определять стиль, а также более мобильные особенности платформы, такие как обработка сенсорного экрана.
Общий стиль вашего приложения в React Native обрабатывается основным компонентом View, хотя все компоненты также получают свои собственные специфические детали стиля. Стили реализованы в самом Javascript, а не в отдельной таблице стилей CSS. Собственный стиль реакции - это простой старый объект javascript, ключи и значения которого совпадают с традиционными свойствами CSS.
Объект стиля может быть определен для каждого основного компонента индивидуально или, если в представлении используется более сложный стиль, вложить их все вместе в более крупный объект таблицы стилей, аналогичный полной таблице стилей CSS. React Native даже поставляется со специальным встроенным объектом StyleSheet для этой цели - использование StyleSheet.create () настраивает ваш стиль для справки во всех компонентах вашей страницы из одного удобного источника правды. Объект StyleSheet проверяет все предоставленные стили за вас, а затем обрабатывается только один раз, что делает ваш код более оптимизированным и эффективным, чем необходимость синтаксического анализа множества отдельных стилей POJO.
React Native - это увлекательный фреймворк, который упрощает разработку нативных приложений для веб-разработчиков. Надеюсь, это было полезным введением в мир стилей React Native.
