react-native – 如何实现什么样的应用程序动画,当向下滚动并且标签贴在顶部时工

我希望实现类似whatsapp动画的东西,其中工具栏在向下滚动时隐藏,并在向上滚动时向后显示标签栏始终粘贴到顶部到目前为止我使用Animated将工具栏高度设置为0时向下滚动并恢复正常时向上滚动但问题是当工具栏被隐藏时,滚动视图高度被更改为覆盖该区域并触发onscroll以便我得到工具栏一直显示和隐藏多次的奇怪动画.

什么应用动画

这是我到目前为止所尝试的

工具栏

<Animated.View style={{height: this.state._showHeaderTitle}}>
    <ToolbarAndroid
        titleColor={'#FFF'}
        title={this.props.title}
        navIcon={images.arrowBack}
        onIconClicked={() => this._goBack()}
        onActionSelected={() => {}}
        actions={[{title: 'Search', icon: images.search, show: 'always'}]}
        style={[{backgroundColor: '#528eff', width: this.windowWidth, height: 48}]}/>
</Animated.View>

滚动型

<ScrollView scrollEventThrottle={16}
    onScroll={(event) => this.detectScrollPosition(event)}
    style={{height: this.windowHeight - this.state.headerTitleCurrentHeight, flexDirection: 'column'}}>
        <View
            style={[styles.highNormalLowDocListBody]}>
                <ListView
                    dataSource={this.state.documents}
                    enableEmptySections={true}
                    renderRow={(rowData) => this._renderRow(rowData)}
                />
        </View>
</ScrollView>

onScroll

detectScrollPosition(event) {
    var currentOffset = event.nativeEvent.contentOffset.y;
    var direction = currentOffset > this.state.offset ? 'down' : 'up';

    this.setState({offset: currentOffset});

    console.log('Begin Scroll');

    if (direction === 'up') {
        Animated.spring(this.state._showHeaderTitle, {
            toValue: 48,
            velocity: 6
        }).start();
        this.setState({headerTitleCurrentHeight: 48});
    } else {
        Animated.spring(this.state._showHeaderTitle, {
            toValue: 0,
            velocity: 6
        }).start();
        this.setState({headerTitleCurrentHeight: 0});
    }
};

您可以使用CoordinatorLayout和CollapsingToolbarLayout来实现此目的.

以下是您可以参考的一些链接：

https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html

http://antonioleiva.com/collapsing-toolbar-layout/