因此,我有一个父组件和一个子组件,而子组件有一个ScrollView
。我想通过子组件的滚动为父组件中的元素设置动画,但是动画值没有变化?这是我的代码:
const Child = ({ handleScroll }) => {
return {
<ScrollView
style={styles.view}
scrollEventThrottle={16},
onScroll={handleScroll}
>
{/*
list of items here
*/}
</ScrollView>
};
}
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
scrollY: (new Animated.Value(0)).interpolate({
inputRange: [0, 1],
outputRange: [200, 50],
extrapolate: 'clamp'
})
};
this.handleScroll = this.handleScroll.bind(this);
}
handleScroll(event) {
return Animated.event([{
nativeEvent: {
contentOffset: {
y: this.state.scrollY
}
}
}]);
}
render() {
return (
<Animated.Image
style={[
styles.imageStyle,
height: this.state.scrollY
]}
/>
<Child handleScroll={this.handleScroll} />
);
}
}