Junny Apps

Настало время поговорить о том, что означают загадочные свойства  flex, justifyContent и alignItems   {     flex:  1 ,     justifyContent:  'center' ,     alignItems:  'center' ,   } flex  - отвечает за то, какую часть экрана займет компонент. В данном случае он растягивается на весь экран. justifyContent:  'center' - выравнивает элементы,  которые содержатся внутри этого компонента, по центру по вертикали. Еще есть такие значения:   'flex-start',   'flex-end', 'space-between', 'space-around' alignItems:  'center' - так же выравнивает элементы по центру, но по горизонтали. Про то, какие есть еще варианты расположения можно почитать вот здесь .  Ниже в коде я закомментировала эти строчки поставив перед ними  // попробуйте раскомментировать (убрать // ) эти строчки по очереди поставьте вместо  'center'  другие возможные значения повторите вот так: ___________________________________________________________________

 В прошлый раз мы немного поигрались со стилями и цветами. Посмотрим, что еще можно с этим сделать и введем новый компонент TouchableOpacity . Кнопка  Button   которую мы применяли раньше, не очень удобна. Не так много вариантов, чтобы изменять ее отображение. Чаще всего используется  TouchableOpacity , стили к этому компоненту применяются также, как к  View . повтори вот так ____________________________________________________________________________________ *Расшифровка кода И я обещала рассказать про конструкцию после  onPress . Когда мы нажимаем на кнопку, то вызывается функция, которую мы передаем в  onPress: () =>  Alert .alert( "Нажми меня еще раз" ) Пустые скобки означают, что в функцию не передаются никакие параметры.  Alert - это компонент, который выводит отдельное окно с текстом. Обычно используется для отладки кода или как простой способ сказать пользователю, что что-то пошло не так или наоборот прошло успешно. ____________________________________________

Итак вы теперь знаете: - как не бояться красного экрана - что примерно такое React Native и Expo - как добавить несколько элементов на экран . Теперь добавим стили для нашего текста и кнопки. В прошлый раз мы использовали три компонента: Button ,  Text ,  View .  Выше вы можете кликнуть на каждый из компонентов и перейти к документации по ним. Если у вас еще не очень хорошо с английским, не отчаивайтесь, рекомендую поставить расширение для браузера, которое будет вам переводить слова по клику на них:  Lingualeo Language Translator   В документации приведены примеры кода тоже с помощью Expo. Поэтому как и здесь, вы можете пробовать менять код на самой странице с документацией о компоненте и смотреть, что изменится.  измени цвета, чтобы получилось вот так: Подсказка: Чтобы определить цвета, используйте программу Color Picker ( для винды  или  предустановленная на маке ) ___________________________________________________________________________________ *Расшифровка кода У  Button  все

Самые неприятные в работе программиста моменты, когда ты вообще не понимаешь, почему вдруг все перестало работать.  Когда такое происходит в первый раз, это и есть проверка, а на самом ли деле ты всего этого хочешь? Сможешь ли просидеть на стуле час-другой, разбираясь, а что же все-таки пошло не так? И если уж тут не получилось, то пойти и найти у кого-то поддержки или помощи, вместо того, чтобы бросить все к чертям Сейчас в правой части вы видите красный экран (чтобы увидеть то же самое на своем телефоне, как мы делали раньше, можно переключиться под красным экраном с Web на MyDevice) исправьте код так, чтобы красного экрана больше не было Подсказка : На красном экране указано, в чем проблема, попробуйте вчитаться. Так же значок ^ указывает, на какой примерно строчке ошибка. Надеюсь вы справились быстро, и красный экран вас больше не будет пугать. Не останавливайся на достигнутом и переходите дальше. Перейти на следующий уровень

*Здесь все со звездочкой. Можете пролистать на следующий урок :) В прошлый раз я упоминала  React Native и все задания мы делаем на платформе expo.io , так что это такое? Любознательные конечно уже успели загуглить эти названия. Но понять все могло быть сложно, особенно в отсутствии навыка чтения на английском. Кстати, сейчас не знание английского не такая уж большая проблема. В худшем случае можно воспользоваться авто-переводом страницы. А лучше поставить расширение для браузера, когда при клике на незнакомое слово, отображается его перевод и записывается в словарик. В этом словарике их потом можно легко выучить. Набор используемых слов в технических статьях не такой большой, как кажется. Итак React Native - фреймворк (набор библиотек и кодовой базы, которая находится под "капотом", которую можно не знать, а просто использовать по списку открытых функций), который позволяет используя язык программирования JavaScript  писать мобильные приложения одновременно на две платформ

В прошлый раз  мы делали простое окно с одной картинкой и запускали его на своем телефоне. Посмотрим на что еще вы способны :) Отсканируйте QR код со своего телефона (у вас должно быть установлено приложение Expo Go с прошлого урока) и посмотрите, что делает код ниже: Согласитесь, текст, который вы увидели, немного странный давайте изменим его, чтобы вышло вот так: Напомню, что изменять код можно просто сверху. У вас это точно получится без даже малейшего понимания, а что собственно этот код делает.  Если что-то пошло не так и все перестало работать, просто обновите страницу и начните заново. ____________________________________________________________________________ *Расшифровка кода: В первой строчке мы импортируем React, чтобы у нас вообще что-либо работало :) Во второй импортируем компоненты из React Native (компонент - элемент приложения, который мы увидим на экране)      Text  - это текст :)      Button  - это кнопка :)      View  - контейнер для остальных элементов (часто