下拉图片放大,稍微修改第三方的代码，用法与第三方相同

https://github.com/lelandrichardson/react-native-parallax-view 此第三方的Github地址

为何修改？

官方的原效果:



实际我所需要的效果:



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

背景中的内容部分(如图红色框)没有完全在背景容器中的时候，其是通过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;