前言
最近在RN技术交流群中发现有不少同学在问渐变颜色的导航栏ReactNative怎么实现，有的同学说虽然实现了功能，但是滑动列表时，界面很卡顿。体验很差，正好之前开发个人RN项目OneM中也使用到了这个效果，索性就直接开源一个导航栏渐变颜色的Demo共大家学习
预览效果图
gif
技术要点
-
onScroll={this._onScroll.bind(this)}ListView组件中的onScroll函数是在列表滚动的就时候触发的，注意： 此函数调用频率极高 -
onEndReachedThreshold={20}此属性是用来控制ListView滚动时调用onScroll函数的频率 -
setNativeProps此属性是直接局部刷新页面UI，而不需要执行this.setState({})，大大的减少了render()函数的调用，极大的提高了列表滑动时的性能和用户体验。
注意点
- 最好不要在
onScroll回调函数中执行this.setState({})，如果这样使用，列表页面渲染频率过高，导致列表滑动很卡顿，体验极差。
项目核心代码
_onScroll(event) {
let y = event.nativeEvent.contentOffset.y
let opacityPercent = y / 64
if (y < 64) {
this.navBar.setNativeProps({
style: {opacity: opacityPercent}
})
} else {
this.navBar.setNativeProps({
style: {opacity: 1}
})
}
}
示例Demo源码地址
https://github.com/guangqiang-liu/react-native-gradientNavigationBarDemo
总结
此Demo项目导航栏渐变效果是按照天猫APP首页渐变导航栏开发的，同学们后期如果开发类似的功能，重新自定义UI即可。如果感觉文章对你有帮助，请 给个
star给个关注谢谢。
