RN FlatList的吸顶操作

案例：

有这么一个需求，见图，做了很多种尝试，会有很多种问题，下面细细说来

案例图

第一种，失败：

使用了网上很多人推荐的一个组件：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; //标题栏的高度
 (this.navBar = ref)}
          style={[
            {
              position: "absolute",
              top:  -px2dp(92),
              left: 0,
              width: px2dp(750),
              height: px2dp(92),
              flexDirection: "row",
              justifyContent: 'space-between'
            },
            colorStyle,
          ]}
        >
...

2、通过onScroll判断距离修改吸顶的组件的top值，使用setNativeProps方法

  recommendlayout(e) {
    this.listOffsetTop = e.layout.height + e.layout.y;
  }

//flatlist的Head，包含banner头部+吸顶部分
renderHeader(){
return ( this.recommendlayout(e)}
      >
{....}
)
}

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

至此，以上三种都是我尝试过的方法以及体验，欢迎有更好方法的同学留言，谢谢