案例：
有这么一个需求，见图，做了很多种尝试，会有很多种问题，下面细细说来
案例图
第一种，失败：
使用了网上很多人推荐的一个组件：StickyHeader
来自：https://github.com/jiasongs/react-native-stickyheader
这个组件效果很好，但是 不适用需要分页效果的flatlist。它需要嵌套在可滑动的组件里面，但是 flatlist 一旦嵌套在scrollview中，分页效果会出问题
第二种，效果很差：
使用了 setState，通过 flatlist 的onScroll方法判断当前滚动的距离，去设置setState值，吸顶的组件绝对定位在顶部，通过setState控制显隐。这种方法可以实现吸顶效果，但是体验很差，你们试过的都知道。
第三种，我个人觉得效果不是特别好，但是能将就着用用，比上面的两种好一些：
同第二种方式类似，具体内容如下：
需要设置两个相同的吸顶组件，一个固定在headr部分，一个为绝对定位，通过控制绝对定位的吸顶组件top值来实现吸顶操作
1、使用绝对定位，设置吸顶组件,默认隐藏：
this.topHeight = du.isAndroid ? 44 : isIphoneX() ? 88 : 64; //标题栏的高度
<View
ref={ref => (this.navBar = ref)}
style={[
{
position: "absolute",
top: -px2dp(92),
left: 0,
width: px2dp(750),
height: px2dp(92),
flexDirection: "row",
justifyContent: 'space-between'
},
colorStyle,
]}
>
...
</View>
2、通过onScroll判断距离修改吸顶的组件的top值，使用setNativeProps方法
recommendlayout(e) {
this.listOffsetTop = e.layout.height + e.layout.y;
}
//flatlist的Head，包含banner头部+吸顶部分
renderHeader(){
return (<View
style={styles.headerContent}
onLayout={({ nativeEvent: e }) => this.recommendlayout(e)}
>
{....}
</View>)
}
_onScroll(event) {
const y = event.nativeEvent.contentOffset.y;
const h = this.listOffsetTop - px2dp(92);
if (y >= h && !this.showTab) {
this.showTab = true;
this.navBar.setNativeProps({
style: { top: this.topHeight }
});
} else if (y < h && this.showTab) {
this.showTab = false;
this.navBar.setNativeProps({
style: {
top: -(px2dp(92) - this.topHeight > 0 ? px2dp(92) : this.topHeight),
}
});
}
}
