我必须在平面列表滚动中隐藏标题(图像)。我有不同组件的图像和平面列表。我正在使用平面列表onscroll本机事件contentoffset y值更新以更新图像组件中的动画。动画效果很好,但在平板列表下有大量空间问题,如图像中所示。我在Animated.View下有Image和flatlist组件,动画应用于Animated.View.And这个Animated.View在View下。
<View style={{backgroundColor:'yellow',flexDirection:'column',flex:1}}>
<Animated.View style={[styles.container, {
opacity: this.state.fadeAnim, transform: [{
translateY: headerTranslate
}]
}]}>
<Image style={styles.topImage} source={require('../Images/chimp.jpg')} />
<DashboardTabView navigate={this.props.navigation.navigate} topScrollAnimation={this.state.topScrollAnim}></DashboardTabView>
</Animated.View>
</View>
转换代码是
const HEADER_MAX_HEIGHT = 320;
const HEADER_MIN_HEIGHT = 70;
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;
const headerTranslate = this.state.topScrollAnim.interpolate({
inputRange: [0, HEADER_SCROLL_DISTANCE],
outputRange: [0, -HEADER_SCROLL_DISTANCE],
extrapolate: 'clamp',
});
请让我知道出错了什么