Уроки React Native — стилизация мобильного приложения

Автор Maksim Inshakov
Уроки React Native — стилизация мобильного приложения

Всем привет.

Друзья вы на канале выбивало прогулок. Не забывайте подписаться на канал, а также поставить лайк этому видео мы продолжаем уроки react native с нуля до Junior разработчика в прошлом видео показал. Как установить.

Як запустить первое приложение после настройки окружения для работы.

Давайте приступим к написанию приложение в этом видео мы рассмотрим. Как работает стилизация react на этих как я уже говорил react-native — это просто реакции снег основными отличиями с точки зрения браузера компоненты react native выглядят очень похожими на компоненты реакт, но основные строительные блоки уже другие места таких тегов как div IMG react native используются базовые компоненты там текст View Image тоже будет если вам еще не приходилось иметь дело с GSX мешанина из систем обратного синтаксиса. И джаваскрипта этот кот. Может вам немного странным и в react и react native используется GSX fsx — это просто расширение поскриптум представляет собой способ структурировать реамберин компонентов используя синтаксис знакомый многим разработчикам cgfx по ходу действия вы разберетесь ничего сложного здесь нет делаете просто подняла и потом войдете во вкус здесь я считаю можно играть. Время на целый урок не рассказывай, что зачем тоже придём кристаллизации для упрощения рендеринга и повышение его эффективности, а также для сохранения поддерживаем мастика реализована ограниченная поддержка CSS вы мне нужно изучать специфические способы разработки видов для каждой платформы react-native жестко ограничено наследование стилей используется онлайн синтакс синтаксис очень просто в чтении вот, что называется онлайн синтаксисом всё начинается с импортирования стащит обязательно обратите на — это внимание так как мы будем использовать данные API для использования далее определяем константу Styles. Где будут прописаны все наши стиле далее мы используем стал ошибки и. Дали используем класс который будем будет использоваться и определяем уже соответственно для него стиля, но думаю, что ничего сложного. Давайте все вместе попробуем. Аида ли вам нужно прописать помощь составил. Далее идет название константы дали название класса и. Давайте попробуем на примере изменим размер шрифта для нашего текста How old are. Для начала я запущу наш проект сделаем этот образом и нажмем Expo Start таком случае запустится наш проект и в этот раз я хочу запустить iOS Simulator для того чтобы показать вам и не более удобно работать с. Айфоном более с ним не смотрится надеюсь вам тоже разница не будет никакой, что с Android, что с iOS будет работать одинаково. Я просто здесь справа будет iPhone они Android для этого вам нужно открыть xcode дали. Она же кот и выбрать 2 портал симулятор соответственно. Таким образом мы запустили Simulator далее. Нам нужно перейти в сервер нашего приложение. Иран iOS Simulator подождать пока подключиться пока загрузится здесь у нас iPhone XR и соответственно запускается наши. Экспо на нашем симуляторе. Айфона Вот как — это всё выглядит. На данном этапе у нас и. Давайте изменим шрифт для нашего текста после этого мы создадим новый класс он будет называться. Хэллоу текст дали оставим оставим пробел и фигурные скобки после этого ставим запятую если у нас будут идти класса ещё дополнительно какие-то. В дальнейшем. Ну и далее здесь мы прописываем размер шрифта допустим как мы хотим font-size — это выглядит таким образом и далее нам нужно ставить размер данном случае — это будет. Давайте Поставим на 50 там запятую и смотрите вот у нас с кем OK inlines обратите на — это внимание никаких черточек немножко отличается от сердца с обычного, но думаю ничего сложного всё и. Понятно вы просто записывайте большой буквы вторая слова в вашем свойства и также обратить внимание, что пиксели. Ничего здесь не пишите сейчас я более подробно об этом расскажу можем открыть симулятор на данном этапе у нас пока ещё ничего не поменяется. Всё дело в том, что нам нужно прописать свойство Style сюда пойдём просто. Скопируй и быстро поменяем здесь у нас теперь не класс контейнер. А класс. Хэллоу текст обратите на — это внимание в. Андроиде нажимайте два раза р эмулятор iPhone на нас автоматически поменяется. Как видите мы поменяли размер шрифта то есть свой составил дали остался — это название. Константа который мы помощью которой мы. Загрузи наши стили текста название нашего класса которые мы будем использовать если простыми словами если нам нужно определить несколько классов. Ну допустим мы хотим ещё поменять цвет текста в нашем элементу изменим Color Time Red ты должна быть в кавычках ставить запятую так же нам нужно определить — это массив элементов и здесь поставить запятую и прописать. Каким образом только здесь поставить другой класс Red и посмотрим, что цвет наших текста изменился вот так вот — это работает всегда всё очень не заморачивайтесь родительного и. Отметь его очень просто мне кажется, что он даже проще чем react где — это моё субъективное мнение не знаю как для начинающих. Напишите в комментарии просто вам или сложно с компонентами текст можете работать очень просто можете допустим у нас будет в данный компонент в текст в нём у нас будет тоже текст и сюда же мы можем ещё определить какой-нибудь текст. Давайте уберём и ещё одно добавить сюда и сюда добавим данные стиле вот так вот мы можем работать с текстом. Вот как — это всё будет выглядеть так как у нас родительский элемент текст данный от него будут все стили для данного текста поэтому так же обратите на — это внимание. А тот, что в ненашево родителей.

0 комментариев
0

Читайте также