native下拉图片放大 react_React Native 下拉放大动画

本文参考的是React Native下拉图片放大动画

因为参考的文章有点问题，所以自己修改了

import React from 'react';

import {

View,

Text,

StyleSheet,

FlatList,

Animated,

Platform,

findNodeHandle

} from 'react-native';

const NavHeight = 0;

class PullDownBig extends React.Component {

static navigationOptions = {

// header: null //隐藏导航栏

}

constructor(props) {

super(props);

this.state = {

scrollY: new Animated.Value(0), //初始化动画效果

isRefresh: false, //下拉刷新动画判断

imgHeight:MyAdjustWidth(255),

viewRef:null,

dataSource: [

{ name: "aaa", num: 16835 }

, { name: "ccc", num: 16752 }

, { name: "ddd", num: 62587 }

, { name: "eee", num: 882 }

, { name: "fff", num: 12068 }

] //初始化Flatlist数据

}

}

//添加动画效果

_renderHeaderParallaxImage() {

const { scrollY } = this.state

let translateY

if (Platform.OS == 'ios') {

translateY = scrollY.interpolate({

inputRange: [this.state.imgHeight - 64 + 50, this.state.imgHeight + (64 - 50), this.state.imgHeight + (64 - 50)],

outputRange: [this.state.imgHeight, this.state.imgHeight - 30, this.state.imgHeight - 30],

})

} else {

translateY = scrollY.interpolate({

inputRange: [this.state.imgHeight - 44 + 30 + 20, this.state.imgHeight - 30 + 44 + 20, this.state.imgHeight - 30 + 44 + 20],

outputRange: [this.state.imgHeight, this.state.imgHeight - 30, this.state.imgHeight - 30],

})

}

//返回动画效果

return (

top: 0,

width: ScreenWidth,

height: this.state.imgHeight,

position: 'absolute',

backgroundColor: 'white'

}}>

onLoad={() => this.setState({viewRef: findNodeHandle(this.refs.backgroundImage)})} // for android blur

ref='backgroundImage'

pointerEvents='none'

style={[styles.postParallaxImage, {

height: this.state.imgHeight,

width: ScreenWidth,

transform: [{

translateY: scrollY.interpolate({

inputRange: [-this.state.imgHeight, 0, this.state.imgHeight - NavHeight, this.state.imgHeight],

outputRange: [this.state.imgHeight / 2, 0, -(this.state.imgHeight - NavHeight), -(this.state.imgHeight - NavHeight)],

})

}, {

scale: scrollY.interpolate({

inputRange: [-this.state.imgHeight, 0, this.state.imgHeight],

outputRange: [2, 1, 1], // -this.state.imgHeight: 2, 0: 1, this.state.imgHeight: 1 当scrollY在-this.state.imgHeight到0时，scale按照2-1的动画运动；当scrollY在0-this.state.imgHeight时，scale不变。可以输入任意数量对应的值，但必须是递增或者相等

})

}]

}]}

source={require('../images/pic.png')}

>

)

}

render() {

return (

styles.container

} >

{this._renderHeaderParallaxImage()}

data={this.state.dataSource}

style={{ backgroundColor: 'transparent' }}

ListHeaderComponent={

//配置Flatlist的HeaderView

}

onScroll={

//滚动的时候，触发动画效果

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

}

onRefresh={

() => {

if (!this.state.isRefresh) {

this.state.setState = {

isRefresh: true

}

}

}

}

refreshing={this.state.isRefresh}

renderItem={({ item }) => (

{item.name}

)}>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff'

},

});

export default PullDownBig;

//MyAdjustWidth 是自定义的一个适应宽度方法，可以忽视