ReactNative用ScrollView简单实现吸顶隐藏导航栏

效果如下

效果.gif

参考ScrollView代码如下

在ScrollView顶部嵌套一个Nav导航栏和一个搜索框，stickyHeaderIndices={[1]}让搜索框吸顶固定。此时已经可以实现吸顶，但还可处理一下，滑动一半便停下的情况。先给ref方便调用它的方法。

   
                {this._scrollView=component}}
                >
                    
                    
                        {}}
                            onFocus={()=>{Actions['first-search'].call()}}
                            />
                    
                    ○}
                            activeDot={●}
                            />
                        }
                    >
                        
                            
                        
                        
                            
                        
                        
                            
                        
                    
                    

                    
                
            

onScrollEndDrag={this.onStop}处理

onStop = (e)=>{
        let {x,y}=e.nativeEvent.contentOffset;
        if(y

参考样式如下

headercontainer:{
        height:px2dp(70),
        width:SCREEN_WIDTH,
        flexDirection:'row',
        justifyContent:'center',
        alignItems: 'center',
        backgroundColor:Colors.primary1,
    },
    search:{
        width: SCREEN_WIDTH-px2dp(80),
         height: px2dp(60), 
         backgroundColor: 'white', 
         borderColor: 'white',
         marginBottom: px2dp(10),
         borderRadius: 16,
         overflow:'hidden',
         borderWidth: 0,
         marginLeft: px2dp(40),
        
    }