Question

我正在尝试实现像whatsapp这样的动画，当你开始滚动工具栏时隐藏它并且列表占用它的空间然后当向后滚动时它再次显示但是它对我来说没有用到目前为止这是我得到的。< / p>

结果

代码

<Animated.View
    style={{
        height: this.state.scrollY.interpolate({
            inputRange: [0, 0.55, 1],
            outputRange: [102, 102, 0],
            extrapolate: 'clamp'
        }),
        backgroundColor: '#528eff',
        flex: 0,
        flexDirection: 'row',
        justifyContent: 'center'}}>
    <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
        <Text style={{fontFamily: 'Roboto-Regular', fontSize: 14, color: 'rgba(255,255,255,0.87)'}}>Requests</Text>
        <Text
            style={{fontFamily: 'Roboto-Regular', fontSize: 36, color: 'rgba(255,255,255,0.87)'}}>{this.state.information.requests}</Text>
        <View
            style={{position: 'absolute', top: 50, bottom: 50, right: 0, width: 2, height: 25, backgroundColor: 'rgba(255,255,255,0.54)'}}/>
    </View>
    <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
        <Text style={{fontFamily: 'Roboto-Regular', fontSize: 14, color: 'rgba(255,255,255,0.87)'}}>Total
            value</Text>
        <Text
            numberOfLines={1}
            ellipsizeMode={'tail'}
            style={{marginLeft: 10, marginRight: 10, fontFamily: 'Roboto-Regular', fontSize: 36, color: 'rgba(255,255,255,0.87)'}}>{this.state.information.total}</Text>
        <View
            style={{position: 'absolute', top: 50, bottom: 50, right: 0, width: 2, height: 25, backgroundColor: 'rgba(255,255,255,0.54)'}}/>
    </View>
    <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
        <Text style={{fontFamily: 'Roboto-Regular', fontSize: 14, color: 'rgba(255,255,255,0.87)'}}>From
            (People)</Text>
        <Text
            style={{fontFamily: 'Roboto-Regular', fontSize: 36, color: 'rgba(255,255,255,0.87)'}}>{this.state.information.people}</Text>
    </View>
</Animated.View>
<ListView
    contentContainerStyle={{paddingBottom: 78}}
    style={{height: this.windowHeight - 183}}
    dataSource={this.state.expensesList}
    scrollEventThrottle={1}
    onScroll={
        Animated.event([{
            nativeEvent: {
                contentOffset: {
                    y: this.state.scrollY
                }
            }
        }])
    }
    enableEmptySections={true}
    renderRow={(rowData) => this._renderRow(rowData)}/>

Answer 1

请参阅此示例：

https://medium.com/@janicduplessis/react-native-scrollview-animated-header-10a18cb9469e#.dqq02kk49

将scrollEventThrottle = {1}推送到scrollEventThrottle = {16}以获得流畅的动画效果。

React Native - Whatsapp就像动画不起作用

1 个答案: