react-native头部渐变色

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

第一种场景

默认没有头部，下滑部分后显示头部

Untitled.gif

 this._onScroll(event)}
   style={styles.scrollView}
>
  // 这里省略部分代码

滑动的时候调用的方法,我们可以直接通过event.nativeEvent.contentOffset拿到y坐标值

_onScroll(event) {
        let y = event.nativeEvent.contentOffset.y;
        let opacityPercent = y / 300;
        if (y < 300) {
            this.navBar.setNativeProps({
                style : {
                    opacity : opacityPercent,
                }
            })
        } else {
            this.navBar.setNativeProps({
                style : {
                    opacity : 1,
                }
            })
        }
    }

我们通过this.navBar.setNativeProps改变头部View的opacity透明度

 this.navBar = ref} style={[ styles.header, { opacity : 0, } ]}>
   goBack()} style={styles.headerIconBox}>
    
  
  
   this.setState({ shareVisible : true })}
       style={styles.headerIconBox3}
   >