React Native中Flatlist滚动上的标题隐藏动画问题

时间:2017-11-12 06:54:41

标签: react-native

我必须在平面列表滚动中隐藏标题(图像)。我有不同组件的图像和平面列表。我正在使用平面列表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',
       });

请让我知道出错了什么

Before scrolling the flatlist

After scrolling, the space below the view. Flatlist is being scrolled with in that view

Video showing the issue

Differntiating flatlist and topview

0 个答案:

没有答案