根据scrollview的滑动，添加悬浮组件

效果是类似SectionList的分组悬浮的效果，具体看代码：

'use strict';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
    Animated,
    StyleSheet,
} from 'react-native';

export default class StickyHeader extends Component {
    static propTypes = {
        stickyHeaderY: PropTypes.number,//悬浮栏初始高度
        stickyScrollY: PropTypes.any,//scrollview的高度
    }
    static defaultProps = {
        stickyHeaderY: -1,
        stickyScrollY: new Animated.Value(0)
    }

    constructor(props) {
        super(props);
        this.state = {
            stickyLayoutY: 0,
        };
    }

    componentDidMount() {
        this.props.stickyScrollY.addListener((info) => {
            // console.log(info)
        })
    }

    _onLayout = (event) => {
        this.setState({
            stickyLayoutY: event.nativeEvent.layout.y,
        });
    }

    render() {
        const { stickyHeaderY, stickyScrollY, children, style } = this.props
        const { stickyLayoutY } = this.state
        // let y = stickyHeaderY != -1 ? stickyHeaderY : stickyLayoutY;
        const translateY = stickyScrollY.interpolate({
            // inputRange: [-1, 0, y, y + 1],
            // outputRange: [0, 0, 0, 1],
            inputRange: [0, stickyHeaderY, stickyHeaderY + 1],
            outputRange: [0, 0, 1],
        });
         return (
            <Animated.View
                onLayout={this._onLayout}
                style={[
                    style,
                    styles.container,
                    { transform: [{ translateY }] }//translateY
                ]
                }
            >
                {children}
            </Animated.View>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        zIndex: 100
    },
});

具体使用组件：

<Animated.ScrollView style={styles.container}
                                         ref={ref => this.scroll2 = ref}
                                         refreshControl={refreshControl}
                                         onScrollEndDrag={this._onEndReached}
                                         onEndReachedThreshold={0.1}
                                         scrollEventThrottle={1}
                                         onScroll={Animated.event([{nativeEvent: {contentOffset: {y: this.state.scrollY,}}}], {useNativeDriver: true})}>
                     
                    </Animated.ScrollView>