Hola, estoy tratando de crear un componente en mi aplicación que se parezca mucho a este . Actualmente estoy luchando con cómo hacer que pueda tener un encabezado plegable que se desplace sin problemas tanto en el encabezado como en las vistas de desplazamiento de las pestañas anidadas.

Esto es lo que tengo hasta ahora . Como puede ver, la vista de desplazamiento hace que tanto el encabezado como el área de contenido se desplacen al mismo tiempo. Me preguntaba si había una manera de hacer que el encabezado se desplazara primero (cuando estaba en la parte superior) y luego el área de contenido se desplazara después.

Aquí está mi código
Encabezado con pestañas Renderizar en padre:

 <Animated.View style={[styles.headerScrollableContainerContent, { top: headerHeight }]} > <View> {...header content} </View {TabRender()} </Animated.View>

Cálculo de la altura del encabezado:

 const scrollY = useRef(new Animated.Value(0)).current; const headerHeight = scrollY.interpolate({ inputRange: [0, HEADER_SCROLL_DISTANCE], outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT], extrapolate: 'clamp', });

Acerca de la pestaña:

 <ScrollView style={styles.container} onScroll={Animated.event( [{nativeEvent: {contentOffset: {y: props.scrollY}}}], {useNativeDriver: false} )} scrollEventThrottle={16} > {...Scroll content} </ScrollView>

Por favor, hágamelo saber si tiene alguna idea o sugerencia. ¡Cualquier ayuda sería realmente apreciada!