@pablo_228

Как сделать чтобы при скроле вниз плавно изчезало нижнее меню?

Здравствуйте
Я начинающий реакт натив разработчик
Подскажите пожалуйста как сделать чтобы при скроле вниз плавно изчезало нижнее меню
Заранее спасибо!5eee2a68462cc996518613.jpeg5eee2a74dabf9104060484.jpeg
Приложение называется medativo
  • Вопрос задан
  • 109 просмотров
Решения вопроса 1
@Mox
Team Lead, RoR, React/React Native
Я что-то похожее делал для верхнего меню. В чем суть

1) Нижнее меню должно быть Animated.View
2) Нужна Animated переменная scrollY: new Animated.Value(0)
3) В главный ScrollView ставите обработчик onScroll

onScroll={Animated.event(
                        [
                            {
                                nativeEvent: {
                                    contentOffset: { y: scrollY },
                                },
                            },
                        ],
                        {
                            useNativeDriver: true,
                        },
                    )}


Дальше что-то такое

const menuTop = scrollY.interpolate({
            inputRange: [<значения для позиций скролла>],
            outputRange: [<значения высоты для меню> ],
            extrapolate: 'clamp',
});


Дальше - само меню должно быть абсолютно спозиционировано, тогда вы просто добавляете стиль

transform: [{ translateY: menuTop }]

Резюмирую общий принцип
- Получаете величину скролла в Animated переменную
- Преобразуете эту величину с помощью interpolate в значения menuTop для сдвига нижнего меню
- Нижнее меню абсолютно спозиционировано и в момент скролла с помощью translateY на величину menuTop оно сдвигается по нужным правилам.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@xenonhammer
Вообще нужно сравнивать высоту всего документа, с текущем положением, и если текущее положение, увеличивается(в px), то это значит, происходит событие scroll.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы