Потренируемся добавлять скрываемую навигацию. Компонент App должен быть навигационным контейнером с Drawer навигатором. Нужно добавить три экрана с именами Asia, Europe, NorthAmerica - именно в этом порядке. Компоненты для экранов соответсвенно: screens/AsiaCities, screens/EuropeCities, screens/NorthAmericaCities....
Теперь мы вместе разработаем полноценное мобильное приложения Vocabulary Builder. Приложение позволит создавать собственный словарик английских слов. В приложении мы используем React Native, RN Navigation, Redux, redux-thunk, AsyncStorage. Будет интересно! Начнем с небольшой подготовки....
Добавим компонент src/components/Buttons/IconButton. Возвращать этот компонент должен элемент TouchableOpacity. Стили этого компонента должны быть массивом стилей. Первый элемент массива должен содержать стиль padding, равный 3. Второй элемент массива - переданное свойство style, равное пустому объекту по умолчанию....
Добавим компонент src/components/Input. Возвращать этот компонент должен элемент View. Стили этого компонента должны быть массивом стилей. Первый элемент массива должен содержать следующие стили: borderRadius - 4, height - 35, flex - 1,...
Добавим компонент src/components/Buttons/Button. Возвращать этот компонент должен элемент TouchableOpacity со стилями: borderRadius - 4, height - 35, width - 120, justifyContent - center, alignItems - center, backgroundColor-colors.blue3, shadowOpacity-0.4, shadowRadius-3, shadowOffset-{width: 0, height: 1}, shadowColor-colors....
Теперь добавим компонент, который будет элементом списка Lists. Добавим его в папке src/containers/Lists/List. Сначала добавим вспомогательный метод getWordsCount в файле src/containers/Lists/List/helpers.js. Это метод первым аргументом будет получать список слов, а вторым - имя списка....
У элемента FlatList контейнера Lists должна быть определенны свойства data и renderItem для отображения элементов списка. Свойство data должно равняться свойству lists контейнера. А метод renderItem должен возвращать компонент List со свойствами: createdAt и listKey....
Подключим компонент List к хранилищу. Нужно в компонент List передать только поле WORDS. Только при его передаче в компонент надо переименовать на words. Эта задача — часть курса по Full-Stack JavaScript....
Поработаем над контейнером AddingListOrWord. На этом экране будет одно поле ввода, и введенное значение надо будет где-то хранить. Для этого используй useState. Сам контейнер AddingListOrWord должен возвращать SafeAreaView со стилями:...
Проработаем контейнер Words, который должен возвращать два SafeAreaView элементами. Первый со стилями: flex - 1, backgroundColor - colors.blue1, а второй: flex - 0, backgroundColor - colors.blue1. Дальше все элементы будут добавляться в первый SafeAreaView....