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

效果如下

参考ScrollView代码如下

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

  <View style={styles.container}> 
                <ScrollView style={{width:SCREEN_WIDTH,height:px2dp(400)}}
                    onScroll={this.onScroll}
                    stickyHeaderIndices={[1]}
                    showsVerticalScrollIndicator={false}
                    overScrollMode={'never'}
                    onScrollEndDrag={this.onStop}
                    ref={(component)=>{this._scrollView=component}}
                >
                    <NavBar title='首页' style={styles.nav}
                    ></NavBar>
                    <View style={styles.headercontainer}>
                        <SearchInput
                            style={styles.search}
                            inputStyle={{color: 'black', fontSize: 14}}
                            iconSize={15}
                            placeholder='客官，需要什么？'
                            placeholderTextColor='#aaa'
                            onChangeText={()=>{}}
                            onFocus={()=>{Actions['first-search'].call()}}
                            />
                    </View>
                    <Carousel 
                        style={{height: px2dp(200)}}
                        control={
                            <Carousel.Control
                            style={{alignItems: 'center'}}
                            dot={<Text style={{backgroundColor: 'rgba(0, 0, 0, 0)', color: '#5bc0de', padding: 4,fontSize: 9}}>○</Text>}
                            activeDot={<Text style={{backgroundColor: 'rgba(0, 0, 0, 0)', color: '#5bc0de', padding: 4,fontSize:9}}>●</Text>}
                            />
                        }
                    >
                        <TouchableWithoutFeedback
                        >
                            <Image style={{width: SCREEN_WIDTH, height: px2dp(200)}} resizeMode='cover' source={require('../sources/credits.png')} />
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback>
                            <Image style={{width: SCREEN_WIDTH, height: px2dp(200)}} resizeMode='cover' source={require('../sources/set.png')} />
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback>
                            <Image style={{width: SCREEN_WIDTH, height: px2dp(200)}} resizeMode='cover' source={require('../sources/true.png')} />
                        </TouchableWithoutFeedback>
                    </Carousel>
                    <View style={{flex:1,height:SCREEN_HEIGHT}}>

                    </View>
                </ScrollView>
            </View>

onScrollEndDrag={this.onStop}处理

onStop = (e)=>{
        let {x,y}=e.nativeEvent.contentOffset;
        if(y<px2dp(50)){
            this._scrollView.scrollTo({x: 0, y: 0, animated: true})
        }else if(y<px2dp(100)){
            this._scrollView.scrollTo({x: 0, y: px2dp(100), animated: true})
        }
    }

参考样式如下

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