native下拉图片放大 react_RN下拉图片放大 - Chason-洪的个人空间 - OSCHINA - 中文开源技术交流社区...

修改于第三方插件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 (

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

*/}

);

},

renderHeader: function () {

var { windowHeight, backgroundSource } = this.props;

var { scrollY } = this.state;

if (!windowHeight || !backgroundSource) {

return null;

}

return (

position: 'relative',

height: windowHeight,

// opacity: scrollY.interpolate({

// inputRange: [-windowHeight, 0, windowHeight / 1.2],

// outputRange: [1, 1, 0]

// }),

}}>

{this.props.header}

);

},

render: function () {

var { style, ...props } = this.props;

return (

{/*{this.renderBackground()}以前的*/}

{this.props.header} {/*修改后的*/}

ref={component => { this._scrollView = component; }}

{...props}

style={styles.scrollView}

onScroll={

Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY }}}])

}

scrollEventThrottle={16}>

{this.renderHeader()}

{/**/}

{this.props.children}

{/**/}

);

}

});

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;