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  все