勤做笔记，方便自己，帮助他人。
这是一个很笨的实现方式 但是好在也能实现。(头部的颜色本来是渐变色 现在是因为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
