react-native - 如何在向下滚动时工具栏消失并且标签粘在顶部时实现什么应用动画？

Question

我想实现类似 whatsapp 动画的功能，其中在向下滚动期间隐藏工具栏，并在向上滚动时显示回来，标签栏始终贴在顶部到目前为止我使用 Animated 将工具栏高度设置为 0 向下滚动时并恢复正常时向上滚动，但问题是当工具栏被隐藏时， ScrollView 的高度会改变以覆盖该区域，这也会触发 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

<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});
    }
};

Answer 1

为此，您可以使用 CoordinatorLayout 和 CollapsingToolbarLayout。

以下是一些您可以引用的链接:

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

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