react-native头部渐变色

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

第一种场景

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

Untitled.gif

<ScrollView
  ref={'ScrollView'}
  scrollEventThrottle={16}
  onScroll={(event) => this._onScroll(event)}
   style={styles.scrollView}
>
  // 这里省略部分代码
</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透明度

<View ref={ref => this.navBar = ref} style={[ styles.header, { opacity : 0, } ]}>
  <TouchableOpacity onPress={() => goBack()} style={styles.headerIconBox}>
    <Image source={require('../../images/icon/back.png')} style={styles.headerIcon}/>
  </TouchableOpacity>
  <MyText.Text1 text={data.name} style={{ fontWeight : 'bold' }}/>
  <TouchableOpacity
      onPress={() => this.setState({ shareVisible : true })}
       style={styles.headerIconBox3}
   >
       <Image source={require('../../images/icon/share.png')} style={styles.headerIcon}/>
  </TouchableOpacity>
</View>