如果项目中未安装react-native-gesture-handler
和react-native-reanimated
需要先安装
yarn add react-native-float-header
使用方法参考App.js
参考来源https://github.com/rgommezz/reanimated-collapsible-navbar
源码FloatHeaderScrollView.js
中包含了处理ios端自定义刷新头位置的问题
- 使用
contentInset
设置刷新头位置,如
contentInset={{ top: 120, bottom: 0, left: 0, right: 0, }}
- 在列表渲染后手动将列表滚动到负的需要下移的位置,如
this.animatedScrollComponent._component.scrollTo({
y: -120,
animated: false,
});
该插件会在手势松开后将浮动头部完全展开或收起,不会出现头部只有部分展示的情况,效果如图
另外寻求兼容ios和安卓的多tab吸顶方案,效果如淘宝ios端首页