前言

最近在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 给个 关注 谢谢。