Поработаем над контейнером AddingListOrWord
.
На этом экране будет одно поле ввода, и введенное значение надо будет где-то хранить.
Для этого используй useState
.
Сам контейнер AddingListOrWord
должен возвращать SafeAreaView
со стилями:
flex
- 1, backgroundColor
- colors.blue1
.
Первым дочерним элементом у AddingListOrWord
должен быть компонент NavigationHeader
.
Вторым дочерним элементом должен быть View
. Это будет хедер.
Стили хедера: flexDirection
- row
, alignItems
- center
, marginTop
: 18
, paddingLeft
- 12
.
Внутри хедера должен быть компонент IconButton
при нажатии которого будет вызываться метод goBack
.
Свойство size
у IconButton
должно быть 23
, name
- cancel-circle
.
После IconButton
должен быть заголовок, сделанный с помощью элемента Text
. Его стили:
color
: colors.black
, fontSize
: 18
, fontFamily
: RobotoRegular
, marginLeft
: 12
.
Внутри заголовка должен быть текст Add list
для экрана с именем ADD_LIST_SCREEN
.
Для экрана с именем ADD_WORD_SCREEN
внутренний тест заголовка должен быть Add word
.
После заголовка добавь тело экрана - элемент View
со стилем flex
, равным 1
.
Внутри него должен быть контейнер поля ввода - элемент View
со стилями:
marginTop
- 29
, paddingHorizontal
- 15
, flexDirection
- row
.
Контейнер поля ввода состоит из двух элементов - компонента Input
и компонента Button
.
Значение поля ввода должно равняться значения состояния, которые мы уже создали, и изменяться оно должно в свойстве onChangeText.
placeholder
у поля должен быть enter list name
для ADD_LIST_SCREEN
и enter word name
для ADD_WORD_SCREEN
.
Свойство autoFocus
поля ввода должно равняться true
, а стили: marginRight
- 14
.
text
компонента Button
должен равняться Add
, а свойство loading
проброшено из свойств контейнера.
Если у контейнера определенно свойство error
, его надо отобразить внутри элемента Text
после тела экрана.
Его стили: color
- colors.red
, fontFamily
- RobotoBold
, fontSize
- 14
, textAlign
- center
, marginTop
- 33
.
Эта задача — часть курса по Full-Stack JavaScript.
Ты можешь задать свой вопрос в комментариях под постом.
Если ты уже решил задачу, то не стесняйся помочь другим.