Уровень 2. Нажми меня еще раз

В прошлый раз мы делали простое окно с одной картинкой и запускали его на своем телефоне. Посмотрим на что еще вы способны :)

Отсканируйте QR код со своего телефона (у вас должно быть установлено приложение Expo Go с прошлого урока) и посмотрите, что делает код ниже:

Согласитесь, текст, который вы увидели, немного странный

• давайте изменим его, чтобы вышло вот так:

Напомню, что изменять код можно просто сверху. У вас это точно получится без даже малейшего понимания, а что собственно этот код делает. 

Если что-то пошло не так и все перестало работать, просто обновите страницу и начните заново.

____________________________________________________________________________

*Расшифровка кода:

В первой строчке мы импортируем React, чтобы у нас вообще что-либо работало :)

Во второй импортируем компоненты из React Native (компонент - элемент приложения, который мы увидим на экране)

    Text - это текст :)

    Button - это кнопка :)

    View - контейнер для остальных элементов (часто нужен для компоновки других элементов интерфейса)

    Alert - позволяет выводить информационное окно

    StyleSheet - позволяет задавать стили

Верстка

Все, что внутри return () будем называть версткой. Там компоненты выглядят

либо вот так  <View></View>  

(открывающийся и закрывающийся тэг, когда нам надо внутри определить дочерние элементы),

либо так <Button />

Стили

Компоненту можно задать стиль отображения <View style={styles.container}> 

Стиль можно определить сразу здесь, как мы это делали в прошлый раз

<ImageBackground style={{ flex:1 }}/> 

 либо для удобства чтения кода вынести в отдельный объект с помощью StyleSheet (нижние строчки) и передать уже этот объект <View style={styles.container}>

{ flex:1 } - это тоже объявление объекта (объект - специальный тип данных), и когда мы объект передаем тут в style то получается, что нужно указать две фигурные скобки вместо одной. потому что одна - это передача кода в верстку, а другая - начало определения объекта.

Уф, пожалуй стоит подвести сегодня под этим черту.

_________________________________________________________________________

*Задание со звездочкой

• показать друзьям, что вы сделали. проверить, одинаково ли этот код будет выглядеть на iOS и на Android (спойлер - нет, будет выглядеть по разному. бегите скорее смотреть)

__________________________________________________________________________________

Перейти на следующий уровень