RN下拉图片放大

修改于第三方插件https://github.com/lelandrichardson/react-native-parallax-view  

为什么修改？

官方的原效果:

实际我所须要的效果:

如上图所示，在开发过程当中咱们遇到了如下问题:

•   背景中的内容部分(如图红色框)没有彻底在背景容器中的时候，其是经过margin等方法将部分露出来，在向下滚动过程当中，我发现背景中的内容部分(如图红色分)会渐渐透明度为0，透明度为0后露出下面的空白一大片的空间，且背景图片上移动的速度比下面页面慢，致使形成的效果仿佛是下面的页面部分把背景给盖上去了，十分丑陋,并且超出头部背景区域后没法点击，如上图第二图所示

修改了哪些

• 去掉了透明度
• 修改了移动的速度
• 去掉了渲染头部的容器,不然超出背景区域外没法点击

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    Dimensions,
    StyleSheet,
    View,
    ScrollView,
    Animated,
} = ReactNative;
/**
 * BlurView temporarily removed until semver stuff is set up properly
 */
//var BlurView /* = require('react-native-blur').BlurView */;
var ScrollableMixin = require('react-native-scrollable-mixin');
var screen = Dimensions.get('window');
import PropTypes from 'prop-types';
var ScrollViewPropTypes = ScrollView.propTypes;
var createReactClass=require("create-react-class");
var ParallaxView = createReactClass({
    mixins: [ScrollableMixin],
    propTypes: {
        ...ScrollViewPropTypes,
        windowHeight: PropTypes.number,
        backgroundSource:PropTypes.oneOfType([
            PropTypes.shape({
                uri: PropTypes.string,
            }),
            // Opaque type returned by require('./image.jpg')
            PropTypes.number,
        ]),
        header:PropTypes.node,
        blur: PropTypes.string,
        contentInset:PropTypes.object,
    },

    getDefaultProps: function () {
        return {
            windowHeight: 300,
            contentInset: {
                top: screen.scale
            }
        };
    },

    getInitialState: function () {
        return {
            scrollY: new Animated.Value(0)
        };
    },

    /**
     * IMPORTANT: You must return the scroll responder of the underlying
     * scrollable component from getScrollResponder() when using ScrollableMixin.
     */
    getScrollResponder() {
        return this._scrollView.getScrollResponder();
    },

    setNativeProps(props) {
        this._scrollView.setNativeProps(props);
    },

    renderBackground: function () {
        var { windowHeight, backgroundSource, blur } = this.props;
        var { scrollY } = this.state;
        if (!windowHeight || !backgroundSource) {
            return null;
        }
        return (
            <Animated.Image
                style={[styles.background, {
                    height: windowHeight,
                    transform: [{
                        translateY: scrollY.interpolate({
                            inputRange: [ -windowHeight, 0, windowHeight],
                                                              //本来是-windowHeight/3
                            outputRange: [windowHeight/2, 0, -windowHeight]
                        })
                    },{
                        scale: scrollY.interpolate({
                            inputRange: [ -windowHeight, 0, windowHeight],
                            outputRange: [2, 1, 1]
                        })
                    }]
                }]}
                source={backgroundSource}>
                {/*
                    !!blur && (BlurView || (BlurView = require('react-native-blur').BlurView)) &&
                    <BlurView blurType={blur} style={styles.blur} />
                */}
            </Animated.Image>
        );
    },

    renderHeader: function () {
        var { windowHeight, backgroundSource } = this.props;
        var { scrollY } = this.state;
        if (!windowHeight || !backgroundSource) {
            return null;
        }
        return (
            <Animated.View style={{
                position: 'relative',
                height: windowHeight,
                // opacity: scrollY.interpolate({
                //     inputRange: [-windowHeight, 0, windowHeight / 1.2],
                //     outputRange: [1, 1, 0]
                // }),
            }}>
                {this.props.header}
            </Animated.View>
        );
    },

    render: function () {
        var { style, ...props } = this.props;
        return (
            <View style={[styles.container, style]}>
                 {/*{this.renderBackground()}之前的*/}  
                 {this.props.header}  {/*修改后的*/}
                <ScrollView
                    ref={component => { this._scrollView = component; }}
                    {...props}
                    style={styles.scrollView}
                    onScroll={
                        Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY }}}])
                    }
                    scrollEventThrottle={16}>
                    {this.renderHeader()}
                    {/*<View style={[styles.content, props.scrollableViewStyle]}>*/}
                        {this.props.children}
                    {/*</View>*/}
                </ScrollView>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        borderColor: 'transparent',
    },
    scrollView: {
        backgroundColor: 'transparent',
    },
    background: {
        position: 'absolute',
        backgroundColor: '#2e2f31',
        width: screen.width,
        resizeMode: 'cover'
    },
    blur: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        backgroundColor: 'transparent',
    },
    content: {
        shadowColor: '#222',
        shadowOpacity: 0.3,
        shadowRadius: 2,
        backgroundColor: '#fff',
        flex: 1,
        flexDirection: 'column'
    }
});

export default ParallaxView;