Size: a a a

React Native — русскоговорящее сообщество

2020 March 04

BS

Bogdan Shelomanov in React Native — русскоговорящее сообщество
Переслано от Bogdan Shelomanov
источник

AM

Alexsandr Menshikov in React Native — русскоговорящее сообщество
блин это же изи
источник

AM

Alexsandr Menshikov in React Native — русскоговорящее сообщество
header делаешь position absolute
источник

AM

Alexsandr Menshikov in React Native — русскоговорящее сообщество
у scrollView есть contentOffset={{ y: 150 }}
источник

BS

Bogdan Shelomanov in React Native — русскоговорящее сообщество
он абсолютом и так, тут contentOffset тоже так
источник

AM

Alexsandr Menshikov in React Native — русскоговорящее сообщество
Alexsandr Menshikov
header делаешь position absolute
top: 0, left: 0
источник

AM

Alexsandr Menshikov in React Native — русскоговорящее сообщество
и все)
источник

BS

Bogdan Shelomanov in React Native — русскоговорящее сообщество
ага, ну вон результат выше
источник

AM

Alexsandr Menshikov in React Native — русскоговорящее сообщество
Alexsandr Menshikov
у scrollView есть contentOffset={{ y: 150 }}
тогда сделай padding
источник

AM

Alexsandr Menshikov in React Native — русскоговорящее сообщество
contentContainerStyle={{ paddingTop: 150 }}
источник

BS

Bogdan Shelomanov in React Native — русскоговорящее сообщество
да не в этом дело, я не управляю анимацией, я не могу проскролив в самый низ, показать снова хедер, что бы его увидеть, нужно скролить в самый верх
источник

AM

Alexsandr Menshikov in React Native — русскоговорящее сообщество
Bogdan Shelomanov
да не в этом дело, я не управляю анимацией, я не могу проскролив в самый низ, показать снова хедер, что бы его увидеть, нужно скролить в самый верх
дело в другом
источник

AM

Alexsandr Menshikov in React Native — русскоговорящее сообщество
ты просто не правильно сделал
источник

AM

Alexsandr Menshikov in React Native — русскоговорящее сообщество
вот и весь секрет
источник

AM

Alexsandr Menshikov in React Native — русскоговорящее сообщество
щас snack пришлю
источник

AM

Alexsandr Menshikov in React Native — русскоговорящее сообщество
5 мин
источник

BS

Bogdan Shelomanov in React Native — русскоговорящее сообщество
вот так все ясно
 Animated.timing(height, {
       toValue: 0,
       duration: 150,
     }).start(),

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

VG

Valentin Galkin in React Native — русскоговорящее сообщество
Bogdan Shelomanov
да не в этом дело, я не управляю анимацией, я не могу проскролив в самый низ, показать снова хедер, что бы его увидеть, нужно скролить в самый верх
onScroll возвращает вам в том числе и contentSize
у Animated.Event есть такая штука, как listener (имеется ввиду Animated из коробки react-native).
в этот listener, если не ошибаюсь, передаются все значения, которые передаются в обычный onScroll метод

Зная contentSize и contentOffset по y - вы можете определить - достиг ли пользователь конца списка. Определив это - вы просто делаете для вашего position.setValue(0) - и хедер будет отображен.

По поводу интерполяции - inputRange содержит два значения в вашем случае - стартовая точка (0 - хедер показывается) и конечная точка (50 - хедер прячется).
Переключение между этими двумя точками будет происходить автоматически при использовании Animated.Event. При скролле ваш animated.value (position в примере) будет автоматически переключаться на новое значение, переданное из объекта прокинутого onScroll событием.

В строке, где вы описываете [{ nativeEvent: { contentOffset: { y: position }}}], вы указываете, что значение, хранящееся в event.nativeEvent.contentOffset.y должно быть проставлено в animated.value (position в примере) объект. По сути - это замещает Animated.timing(...).start(). Все реализовано автоматом.
источник

BS

Bogdan Shelomanov in React Native — русскоговорящее сообщество
Valentin Galkin
onScroll возвращает вам в том числе и contentSize
у Animated.Event есть такая штука, как listener (имеется ввиду Animated из коробки react-native).
в этот listener, если не ошибаюсь, передаются все значения, которые передаются в обычный onScroll метод

Зная contentSize и contentOffset по y - вы можете определить - достиг ли пользователь конца списка. Определив это - вы просто делаете для вашего position.setValue(0) - и хедер будет отображен.

По поводу интерполяции - inputRange содержит два значения в вашем случае - стартовая точка (0 - хедер показывается) и конечная точка (50 - хедер прячется).
Переключение между этими двумя точками будет происходить автоматически при использовании Animated.Event. При скролле ваш animated.value (position в примере) будет автоматически переключаться на новое значение, переданное из объекта прокинутого onScroll событием.

В строке, где вы описываете [{ nativeEvent: { contentOffset: { y: position }}}], вы указываете, что значение, хранящееся в event.nativeEvent.contentOffset.y должно быть проставлено в animated.value (position в примере) объект. По сути - это замещает Animated.timing(...).start(). Все реализовано автоматом.
https://q63fg.csb.app/

вот что нужно, но в рн, может просто никто не понял, что я хотел
источник
2020 March 05

VG

Valentin Galkin in React Native — русскоговорящее сообщество
Bogdan Shelomanov
https://q63fg.csb.app/

вот что нужно, но в рн, может просто никто не понял, что я хотел
Если я правильно понял по превью, что вы скинули, основная проблема в том, что при скролле вверх из любой позиции списка хедер не показывался?

Бегло глянул, вроде бы поведение похожее получилось реализовать.
источник