react-native 实现header渐变

react-native 项目中滚动的时候header透明渐变

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>
    )
  }
}