И снова здравствуйте!

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

Предыдущая статья доступна там.

Как обычно, я хочу, чтобы вы увидели нашу цель - сделать наш проект красивым, как в gif ниже, поэтому давайте прочитаем:

Чего мы хотим:

Давайте видим переполнение!
Как видно на гифке выше, видно три плаката: предыдущий, текущий и следующий. Это выглядит красиво и удобно, потому что пользователь знает, в каком направлении пользовательский интерфейс может прокручиваться. Для этого нам нужно записать небольшую хитрость:

<ScrollView
    style={{
        alignSelf: 'center', // Move it to center
        width: screen.width - 80, // Make it smaller then screen
        overflow: 'visible' // Allow to visible clipped elements
    }}
...

Все элементы в ScrollView должны быть одинаковой ширины.

Перепрокрутите его прямо сейчас!
Еще одна вещь, это блокировка прокрутки. Если управляемый пользователь пытается прокрутить первый / последний постер, мы не должны показывать ему пробелы на экране, потому что они выглядят очень ужасно и оставляют плохое впечатление, поэтому мы разрешаем пользователю чрезмерную прокрутку, но только одна вещь…

Для этого нам нужно добавить только одну строку кода в обработчик события posters ScrollView onScroll, это условие IF:

onScroll={(e) => {
    if (e.nativeEvent.contentOffset.x >= 0 && e.nativeEvent.contentOffset.x < (screen.width - 80) * (items.length - 1)) {
        this.scrollBack.scrollTo({
            x: e.nativeEvent.contentOffset.x / (screen.width - 80) * screen.width
        });

        this.scrollCont.scrollTo({
            x: e.nativeEvent.contentOffset.x / (screen.width - 80) * (contentWidth + SPACE_LG2)
        });
    }
}}

Мне нужны жанры!
Хорошо, давайте возьмем их из API TheMovieDB. Чтобы получить жанры фильма, вы должны делать запрос для каждого фильма, это сложно, но мы это сделаем.

Сначала получите фильмы из нужного раздела: Сейчас играет, Лучшие оценки, Популярные и т. Д., Затем сделайте запрос GET для каждого фильма по этому пути https://api.themoviedb.org/3/movie / {movie_id} , затем сопоставьте / уменьшите как обычно.

После получения тегов я реализую элемент управления Tagger, который показывает жанры в виде тегов в списке внизу раздела содержимого, поэтому мы заполнили жанры на экране. Кроме того, я показываю информацию о продолжительности фильма и дате выпуска в формате, как на гифке выше.

Как обычно, все исходники открыты и доступны в моем репозитории GitHub, удачи!

Пожалуйста, помогите мне, если вы хотите улучшить эту статью, так что не стесняйтесь - записывайте свои комментарии!