本文参考的是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 (
<Animated.View style={{
top: 0,
width: ScreenWidth,
height: this.state.imgHeight,
position: 'absolute',
backgroundColor: 'white'
}}>
<Animated.Image
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')}
>
</Animated.Image>
</Animated.View>
)
}
render() {
return (
<View style={
styles.container
} >
{this._renderHeaderParallaxImage()}
<FlatList
data={this.state.dataSource}
style={{ backgroundColor: 'transparent' }}
ListHeaderComponent={
//配置Flatlist的HeaderView
<View style={{ height: this.state.imgHeight }} />
}
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 }) => (
<View style={styles.cell}>
<Text > {item.name}</Text>
</View>
)}>
</FlatList>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff'
},
});
export default PullDownBig;
//MyAdjustWidth 是自定义的一个适应宽度方法,可以忽视