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

Posted 2023-03-09

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

onScrollEndDrag=this.onStop处理

react native实现ScrollView简单案例

1. 最主要就是这两个属性
 horizontal=true  // 子视图元素水平排列
 showsHorizontalScrollIndicator=true // 水平方向上出现滚动条

 showsHorizontalScrollIndicator=false // 隐藏滚动条

具体想了解其它属性，官方文档API： https://reactnative.cn/docs/scrollview/

2. 下面就是实现的具体代码

import React , Component from ‘react‘;
import Text,View,ScrollView,StyleSheet,Image from ‘react-native‘;

export default class NewCourse extends Component
    constructor(props)
        super(props)
    
    render()
        return (
            <View style=styles.scrollBox>
                <ScrollView contentContainerStyle=styles.contentContainer
                  horizontal=true
                  showsHorizontalScrollIndicator=true

                    showsHorizontalScrollIndicator=false

>
                    <Image source=require(‘../imgs/bing.jpg‘) style=styles.bannerImg />
                    <Image source=require(‘../imgs/dong.jpg‘) style=styles.bannerImg />
                    <Image source=require(‘../imgs/lv.jpg‘)   style=styles.bannerImg /> 
                    <Image source=require(‘../imgs/bing.jpg‘) style=styles.bannerImg />
                    <Image source=require(‘../imgs/dong.jpg‘) style=styles.bannerImg />
                    <Image source=require(‘../imgs/lv.jpg‘)   style=styles.bannerImg />
                    <Image source=require(‘../imgs/dong.jpg‘) style=styles.bannerImg />
                    <Image source=require(‘../imgs/lv.jpg‘)   style=styles.bannerImg />  
                </ScrollView>
            </View>
        )
    


let styles = StyleSheet.create(
    scrollBox:
        height: 206,
        borderWidth: 1,
        borderColor: "gray"
    ,
    contentContainer:
       
    ,
    bannerImg:
        width: 136,
        height: 136
     
)