82 lines
2.4 KiB
JavaScript
82 lines
2.4 KiB
JavaScript
import React from 'react';
|
|
import { Animated, TouchableWithoutFeedback, View } from 'react-native';
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
export default class CycleView extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
activeView: props.initialView
|
|
};
|
|
|
|
this.opacityArr = React.Children.map(props.children,
|
|
(c, i) => { console.log("iter", c, i); return new Animated.Value(i === props.initialView ? 1 : 0); });
|
|
|
|
this.fadeInAnimations = this.opacityArr.map(a => Animated.timing(a, {
|
|
toValue: 1,
|
|
duration: props.fadeDuration,
|
|
useNativeDriver: true
|
|
}));
|
|
this.fadeOutAnimations = this.opacityArr.map(a => Animated.timing(a, {
|
|
toValue: 0,
|
|
duration: props.fadeDuration,
|
|
useNativeDriver: true
|
|
}));
|
|
|
|
console.log("opacity arr length", this.opacityArr.length, React.Children.count(props.children));
|
|
}
|
|
|
|
_onTouch = () => {
|
|
const currentViewIdx = this.state.activeView;
|
|
const nextViewIdx = (currentViewIdx + 1) % React.Children.count(this.props.children);
|
|
this.fadeOutAnimations[currentViewIdx].start();
|
|
this.fadeInAnimations[nextViewIdx].start();
|
|
this.setState({ activeView: nextViewIdx });
|
|
this.props.onViewChange(nextViewIdx);
|
|
}
|
|
|
|
render() {
|
|
const children = React.Children.map(this.props.children, (c, i) => c);
|
|
|
|
return (
|
|
<TouchableWithoutFeedback onPress={this._onTouch} styles={{ flex: 1 }}>
|
|
<View styles={{ flex: 1, flexDirection: 'row', width: "100%" }}>
|
|
{
|
|
React.Children.map(this.props.children, (c, i) => {
|
|
return <Animated.View style={{
|
|
position: i === 0 ? 'relative' : 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
opacity: this.opacityArr[i],
|
|
transform: [{
|
|
scale: this.opacityArr[i].interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [this.props.minScaleOnFade, 1],
|
|
})
|
|
}]
|
|
}}>
|
|
{c}
|
|
</Animated.View>
|
|
})
|
|
}
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
);
|
|
}
|
|
}
|
|
|
|
CycleView.propTypes = {
|
|
initialView: PropTypes.number,
|
|
fadeDuration: PropTypes.number,
|
|
minScaleOnFade: PropTypes.number,
|
|
onViewChange: PropTypes.func,
|
|
}
|
|
|
|
CycleView.defaultProps = {
|
|
initialView: 0,
|
|
fadeDuration: 600,
|
|
minScaleOnFade: 0.4,
|
|
onViewChange: viewIdx => null,
|
|
} |