We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
if the screen in second or more than
the back panResponder will cover the animated-tab
import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {View, Animated, PanResponder, StyleSheet, Dimensions} from 'react-native'; import AnimatedTabPanel from './AnimatedTabPanel'; const getDeviceWidth = () => Dimensions.get('window').width; const pow = value => Math.sign(value) * Math.pow(Math.abs(value), 0.8); const getDefaultSwipeThreshold = () => getDeviceWidth() / 7; const getDefaultPanelWidth = () => getDeviceWidth() / 1.4; // add there const getDeviceBorder = () => 40; class AnimatedTabs extends Component { // // add there windowWidth = getDeviceWidth() // add there isNext = false; // add there border = this.props.border || getDeviceBorder() state = this.initialize(this.props); initialize(props) { validate(props); return { panels: props.children, activePanel: props.activePanel, x: new Animated.Value(0), animatedConfig: props.animatedConfig }; } componentWillMount() { const {onMoveShouldSetPanResponder} = this.props; this._panResponder = PanResponder.create({ onStartShouldSetPanResponder: onMoveShouldSetPanResponder ? () => false : () => true, onMoveShouldSetPanResponder: onMoveShouldSetPanResponder ? onMoveShouldSetPanResponder : () => false, // add there onPanResponderGrant: () => this.isNext = true, onMoveShouldSetPanResponderCapture: () => false, onPanResponderMove: (a, e) => { // modify the here if (!this.isNext) return const {activePanel: tab, panels} = this.state; const dx = ((tab === 0 && e.dx > 0) || (tab === (panels.length - 1) && e.dx < 0)) ? pow(e.dx) : e.dx; e.moveX < this.border || e.moveX > this.windowWidth - this.border ? (this.isNext = false, this._onPanResponderRelease()) : Animated.event([{dx: this.state.x}])({dx}) }, onPanResponderRelease: () => { // modify here if (!this.isNext) return this._onPanResponderRelease() } }); } componentWillReceiveProps(props) { const {panelWidth = getDefaultPanelWidth()} = props; if (props.activePanel !== this.state.activePanel) { const direction = Math.sign(this.state.activePanel - props.activePanel); this._animate(panelWidth * direction, props.activePanel); } if (this.props.children !== props.children) { this.setState(this.initialize(props)); } } render() { const {panelStyle, panelWidth = getDefaultPanelWidth(), sidePanelOpacity, sidePanelScale} = this.props; const {activePanel, x} = this.state; const margin = -panelWidth + (getDeviceWidth() - panelWidth) / 2; const translateX = margin + activePanel * -panelWidth; const panels = [null, ...this.state.panels, null]; const width = panelWidth * panels.length; return ( <View style={[styles.panels, this.props.style, {width, transform: [{translateX}]}]}> {panels.map((panel, index) => <AnimatedTabPanel key={index} index={index-1} width={panelWidth} translateX={x} activePanel={activePanel} panHandlers={this._panResponder.panHandlers} panelStyle={panelStyle} sideOpacity={sidePanelOpacity} sideScale={sidePanelScale} > {panel} </AnimatedTabPanel> )} </View> ); } _onPanResponderRelease() { const {panelWidth = getDefaultPanelWidth(), swipeThreshold = getDefaultSwipeThreshold()} = this.props; const {x, panels, activePanel} = this.state; const direction = x._value > 0 ? 1 : -1; const canMove = (direction > 0 && activePanel > 0) || (direction < 0 && activePanel < panels.length - 1); if (Math.abs(x._value) > swipeThreshold && canMove) { this._animate(panelWidth * direction, activePanel - direction); } else { this._animate(0, activePanel); } } _animate(toValue, activePanel) { let {animatedConfig, x} = this.state; animatedConfig.toValue = toValue; this.props.onAnimate(activePanel); Animated.spring(x, animatedConfig).start(() => { x.setValue(0); this.setState({activePanel}); this.props.onAnimateFinish(activePanel); }); } } AnimatedTabs.propTypes = { activePanel: PropTypes.number, animatedConfig: PropTypes.object, children: PropTypes.array.isRequired, onAnimate: PropTypes.func, onAnimateFinish: PropTypes.func, onMoveShouldSetPanResponder: PropTypes.func, panelStyle: PropTypes.object, panelWidth: PropTypes.number, swipeThreshold: PropTypes.number, sidePanelOpacity: PropTypes.number, sidePanelScale: PropTypes.number }; AnimatedTabs.defaultProps = { activePanel: 0, animatedConfig: { tension: 70, friction: 10 }, onAnimate: () => undefined, onAnimateFinish: () => undefined }; function validate(props) { if (!props.children) { throw new Error('Animated Tabs: should have at least one panel in children'); } if (props.children.length && props.activePanel >= props.children.length) { throw new Error('Animated Tabs: activePanel index can\'t be larger than panels count'); } } const styles = StyleSheet.create({ panels: { flex: 1, top: 0, alignItems: 'flex-start', flexDirection: 'row' } }); export default AnimatedTabs;
The text was updated successfully, but these errors were encountered:
No branches or pull requests
modify the bug in router
if the screen in second or more than
the back panResponder will cover the animated-tab
The text was updated successfully, but these errors were encountered: