Теперь поработаем над компонентом Details. Он должен возвращать элемент View. У View свойство marginVertical должно равняться 10. Внутри View сначала добавим элемент Text: для значения detailsKey defs - внутренний текст Definition:,...
Теперь время проработать компонент Word. В нем будут разворачиваться и сворачиваться детали. Для этого добавим флаг с использованием хука useState. Начальное значение - false. Компонент Word должен возвращать элемент View, внутри которого будет TouchableOpacity со стилями:...
Для отображения данные надо сначала подготовить. Для этого экспортируй функцию preparedDetails из файла: src/containers/Words/Word/helpers.js. Получать эта функция должна один аргумент meanings. meanings это массив объектов, которые описывают слово. Каждый объект состоит из строк def, example и массива строк synonyms....
Нам надо добавить еще один, на этот раз последний, компонент. Создадим его в папке src/components/AlertModal. Возвращать этот компонент должен элемент Modal. Свойство visible должно быть проброшено в него, а свойство handleClose в его свойство onRequestClose....
Добавим модальное окно в контейнер Words. Сначала добавим логику его включения. Создадим его состояние с помощью useState. Начальное значение это объект с полями: visible со значением false, title - пустая строка, handleDelete - null....
Добавим компонент навигатора в файле src/components/Navigator/index.js. Сразу добавим временные компоненты для наших будущих экраном. Разместим их в папке src/containers: Words/index.js, Lists/index.js, AddingListOrWord/index.js. Все компоненты и контейнеры надо называть точно также, как папки в которых они находятся....
Контейнер Words нужно подключить к хранилищу с помощью метода connect. Будем использовать и mapStateToProps, и mapDispatchToProps. mapStateToProps должен возвращать только одно свойство words, равное WORDS из состояния. mapDispatchToProps должен быть объектом со свойствами: dispatchDeleteList и dispatchDeleteWord....
Контейнер AddingListOrWord нужно подключить к хранилищу с помощью метода connect. Будем использовать и mapStateToProps, и mapDispatchToProps. mapStateToProps должен возвращать два свойство loading и error из состояния. mapDispatchToProps должен возвращать объект с тремя свойствами: dispatchAddList, dispatchFetchWord, dispatchClearError....
Последний штрих - загрузка данных между включениями. В файле App.js перед загрузкой шрифтов добавь вызов метода store.dispatch. store мы импортировали ранее и передавали ее в провайдер. Единственным аргументом метода store.dispatch будет вызов метода readAsyncStorage....
Добавим файл с перечнем цветов, которые будут использоваться в проекте. Из файла src/assets/styles/colors.js экспортируй по умолчанию объект. В этом объекте определи цвета: blue: #4D8ADA, blue1: #FAFCFF, blue2: #D5E2F2, blue3: #DEECFE, black: #1E1E1E,...