react-native吸顶效果

勤做笔记，方便自己，帮助他人。

这是一个很笨的实现方式但是好在也能实现。(头部的颜色本来是渐变色现在是因为gif的问题变成条纹了)

b.gif

核心代码在滚动的时候去设置zIndex

_onScroll(event) {
      let y = event.nativeEvent.contentOffset.y;
      if (y < 100) {
          if (this.state.sIndex === 9) {
              this.setState({
                  sIndex : 1,   // 开始被隐藏的标签栏
                  hIndex : 9,   // 开始时显示标签栏
              });
          }
      } else {
          if (this.state.sIndex === 1) {
              this.setState({
                  sIndex : 9,
                  hIndex : 1,
              });
          }
      }
  }

我的实现过程是用绝对定位在顶部多写一个的标签栏默认zIndex:1 然后再滚动到一定程度的时候把标签栏的zIndex设置得比其他的大zIndex:9（其中 LinearGradient 是渐变色View）

<LinearGradient
   ref={ref => this.navBar = ref}
   style={[ styles.header2, { zIndex : this.state.sIndex } ]}
   start={{ x : 0, y : 1 }}
   end={{ x : 1, y : 1 }}
   colors={[ '#FF9100', '#FF6500' ]}
>

  <ScrollView
       showsHorizontalScrollIndicator={false}
       style={styles.scrollView2}
       horizontal={true}
  >
         {
            list.map((item, i) =>
               <TouchableOpacity
                     onPress={() => this.setState({ select : item}) }
                      key={i}
                      style={[ styles.headerTag, select == item ? { borderBottomWidth : 2 } : '' ]}>
                      <MyText.BtnText text={item}/>
               </TouchableOpacity>
            )}
  </ScrollView>
</LinearGradient>

更多详细信息可以参考： https://www.jianshu.com/p/f767d05708ff

react-native吸顶效果

推荐阅读更多精彩内容