react-native 项目中滚动的时候header透明渐变
![](http://upload-images.jianshu.io/upload_images/7450593-61861ce4f2506757.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/572)
image.png
实现方法
- 通过ref属性的
setNativeProps
方法实现;
在onScroll的时候,动态获取到当前滚动的位置,动态设置header的透明度;
class Index extends Component {
constructor(props) {
super(props);
}
_onScroll = (event) => {
let Y = event.nativeEvent.contentOffset.y;
console.log(Y);
if (Y < 100) {
st = Y*0.01;
} else {
st = 1;
}
this._refHeader.setNativeProps({
opacity:st
})
}
static navigationOptions = ({ navigation, screenProps }) => {
return ({
header: null
})
}
render() {
return (
<View >
<View ref={(e) => this._refHeader = e} style={{ opacity: 0, backgroundColor: "#fff", justifyContent: "center", alignItems: "center", height: 50, position: "absolute", left: 0, right: 0, zIndex: 2 }}><Text>首页</Text></View>
<ScrollView
onScroll = {this._onScroll}
scrollEventThrottle = {10}
>...others code</ScrollView>
...others code
</View>
)
}
}
作者:我的昵称好听吗
链接:https://www.jianshu.com/p/7fbd94e3c0d5
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。