我正在屏幕上使用 ScrollView 实现动画标题。在scrollView onScroll 上,我还在scrollview Y 位置的基础上设置myview。像这样
const onScroll = ({ nativeEvent: { contentOffset: { y, x } } }) => {
let _currentSection;
// loop sections to calculate which section scrollview is on
state.sections.forEach((section, index) => {
// adding 15 to calculate Text's height
const moveToPOsition = wp('24') * 5.8 * index
console.log((y), state[section], index, moveToPOsition)
if ((y + 15) > moveToPOsition) _currentSection = index
})
// settint the currentSection to the calculated current section
setState((currentState) => ({ ...currentState, currentSection: _currentSection }))
}
现在在实现动画标题时,我需要在滚动上添加动画代码。这个
const handleScroll = Animated.event(
[
{
nativeEvent: {
contentOffset: { y: scrollY.current },
},
},
],
{
useNativeDriver: true,
},
);
当我将两个代码一起添加并调用滚动视图的 onScoll 时,它们不起作用......而它们分别起作用。
const onScroll = ({ nativeEvent: { contentOffset: { y, x } } }) => {
let _currentSection;
// loop sections to calculate which section scrollview is on
state.sections.forEach((section, index) => {
// adding 15 to calculate Text's height
const moveToPOsition = wp('24') * 5.8 * index
console.log((y), state[section], index, moveToPOsition)
if ((y + 15) > moveToPOsition) _currentSection = index
})
// settint the currentSection to the calculated current section
setState((currentState) => ({ ...currentState, currentSection: _currentSection }))
Animated.event(
[
{
nativeEvent: {
contentOffset: { y: scrollY.current },
},
},
],
{
useNativeDriver: true,
},
)
}
像这样调用 onScoll
<Animated.ScrollView
style={styles.scrollView}
ref={scrollView}
contentContainerStyle={{paddingTop: headerHeight}}
scrollEventThrottle={100}
bounces={false}
onScroll={onScroll}>
{state.sections.map(section => (
<Item key={section.id} category={section}
onItemLayout={onItemLayout} data={data} />
))}
</Animated.ScrollView>