反应本机Flatlist保留和滚动问题

Question

我正在使用react native平面列表来呈现列表。我正在使用Flatlist onScroll contentOffset检测scrollDirection。根据scrollDirection，我将隐藏其上方的导航栏。当用户向下滚动时，导航栏将被隐藏，否则将显示内容导航器。我正在使用动画视图，并根据滚动导航器更改style={{top: number}}的值以更改顶部位置以隐藏内容导航器。 用户在滚动后释放滚动时，它可以按预期工作，但是如果用户按住滚动并且 scrollDirection更改，contentOffset将开始振荡，并且屏幕会在显示和隐藏内容导航器之间闪烁。我不确定是什么原因引起的。

这是scrollDirectionHandler的代码。

const scrollDirectionHandler = (nativeEvent) => {
        var currentContentOffset = Math.max(nativeEvent.contentOffset.y,0);        
        if(currentContentOffset>contentOffset){
                console.log("Scrolling down")
                scrollOffset.setValue(-195)
                setScrollDirection(false)
            }
            else{
                console.log("Scrolling up")
                scrollOffset.setValue(0)
                setScrollDirection(true)
            }
        setContentOffset(Math.max(currentContentOffset,0))
    }

以下是渲染组件：

<View style={{elevation: 8, backgroundColor: '#f5f5f5', opacity: scrollDirection? 1:0}}>
       <ContentNavigatorComponent/>
</View>
<View style={{marginTop: scrollDirection?40:0}}>
                <Animated.View style={{top: Animated.add(offset, scrollOffset)}}> 
                <View>
                    <FlatList 
                    onScroll={({nativeEvent})=>{
                        scrollDirectionHandler(nativeEvent)
                    }} 
                    data={something} renderItem={renderItem} contentContainerStyle={{ paddingBottom: 400}}
                    
                    initialNumToRender={7}/>
                </View>
                </Animated.View>
</View>

我删除了一些冗余代码。 这也是用户滚动后释放滚动条时滚动条的gif。

用户未释放滚动条时滚动条的gif。