Отреагировать нативный анимационный заголовок на прокрутке ⇐ Javascript

[Anonymous]

Я пытался найти способ иметь возможность иметь заголовок, который перемещается с прокруткой в ​​сочетании с коммутатором вкладок, который в определенной точке переходит в положение. Я смог заставить все это работать отлично, однако у меня есть одна проблема. Запустите вертикальный свиток при выполнении жеста прокрутки сверху. В настоящее время в заголовке прокручивается прокрутка ScrollView как его абсолютное расположение над ним, это просто кнопки и горизонтальные свитки, которые находятся в нем, которые не являются. < /P>
import { View } from 'react-native';
import Animated, { useAnimatedStyle, interpolate, interpolateColor } from 'react-native-reanimated';
import { TabView } from 'react-native-tab-view';

// import provider
import type { SceneRendererProps } from 'react-native-tab-view'
import { useScroll } from '~/utils/providers'

// import constants
import { Screen } from '~/components/layouts'
import { DefaultHeader } from '~/components/global'

// styles
import { Layout } from '~/styles'

// import styles
import { useStyles } from './style'

// import theme
import { useTheme } from '~/theme'

// import types
import type { IconsType } from '~/constants'
import type { TranslationString, TranslationStringWIthOptions } from '~/locales'

// define types
type ScreenWithHeaderProps = {
headerTitle: string | TranslationString | TranslationStringWIthOptions
headerRightIcons?: Array void }>
headerHeight?: number
topComponentHeight?: number
topComponent: React.ReactNode
tabBarHeight?: number
routes: Array
renderTabBar: (props: SceneRendererProps) => React.ReactNode
renderScene: (props: SceneRendererProps & { route: any }) => React.ReactNode
activeIndex: number
onIndexChange: (index: number) => void
}

export function ScreenCollapsableTabView({
headerTitle,
headerRightIcons,
headerHeight = 0,
topComponentHeight = 0,
tabBarHeight = 0,
topComponent,
routes,
renderTabBar,
renderScene,
activeIndex,
onIndexChange,
}: ScreenWithHeaderProps) {
// get styles file
const styles = useStyles()

// get theme data
const theme = useTheme()

// get scroll state and handler from content
const { scrollY } = useScroll()

const headerAnimatedStyle = useAnimatedStyle(() => ({
transform: [
{
translateY: interpolate(
scrollY.value,
[0, headerHeight + topComponentHeight],
[0, -(headerHeight + topComponentHeight)],
'clamp'
)
},
],
}))

// header backgroundcolor animation for on scroll change
const backgroundColorHeader = useAnimatedStyle(() => {
return {
backgroundColor: interpolateColor(
scrollY.value,
[0, 60],
['rgba(22, 33, 59, 0)', theme.colors.backgroundThird],
),
};
})

// animated tab bar transform & color
const tabBarAnimatedStyle = useAnimatedStyle(() => {
const translateY = interpolate(
scrollY.value,
[0, headerHeight + tabBarHeight],
[headerHeight + tabBarHeight, 0],
'clamp'
)
const backgroundColor =
scrollY.value

Подробнее здесь: https://stackoverflow.com/questions/794 ... -on-scroll