GIF.gif
核心代码
_renderHeaderParallaxImage() {
const {scrollY} = this.state
let IMAGE_URL = 'http://www.sebio.net.cn/cfiles/images/ssdff.jpg'
return (
<Animated.Image
pointerEvents='none'
style={[{width: width, position: 'absolute', zIndex: 0}, {
height: this.isIPhoneXTop() ? 210 : 187,
transform: [{
translateY: scrollY.interpolate({
inputRange: [(this.isIPhoneXTop() ? -210 : -186), 0, (this.isIPhoneXTop() ? 210 : 186)],
outputRange: [(this.isIPhoneXTop() ? 210 / 2 : 186 / 2), 0, (this.isIPhoneXTop() ? -210 / 3 : -186 / 3)],
})
}, {
scale: scrollY.interpolate({
inputRange: [(this.isIPhoneXTop() ? -210 : -186), 0, (this.isIPhoneXTop() ? 210 : 186)],
outputRange: [2, 1, 1],
})
}]
}]}
source={{uri: IMAGE_URL}}
/>
)
}
{this._renderHeaderParallaxImage()}
<FlatList
ListHeaderComponent={this._header.bind(this)}
renderItem={this._renderItem.bind(this)}
data={[1, 2, 3, 4, 5]}
keyExtractor={this._keyExtractor}
extraData={this.state}
showsVerticalScrollIndicator={false}
onScroll={Animated.event([{nativeEvent: {contentOffset: {y: this.state.scrollY}}}])}
/>
