diff --git a/src/components/bottomTabBar/view/tabbar.js b/src/components/bottomTabBar/view/tabbar.js index dba398214..a797f77dc 100644 --- a/src/components/bottomTabBar/view/tabbar.js +++ b/src/components/bottomTabBar/view/tabbar.js @@ -39,6 +39,7 @@ export default class TabBar extends Component { pathD: new Animated.Value(selectedIndex * value), pathX: selectedIndex * value, animateConstant: value, + animating: false, }; this.state.circleRadius.addListener(circleRadius => { @@ -73,24 +74,28 @@ export default class TabBar extends Component { _move = index => { const { animateConstant, pathD, circleRadius } = this.state; - this.setState({ selectedIndex: '' }); - + this.setState({ selectedIndex: index, animating: true }); Animated.timing(pathD, { toValue: 0 + index * animateConstant, - duration: 450, - }).start(() => { - setTimeout(() => { - this.setState({ selectedIndex: index }); - }, 350); - }); + duration: 350, + }).start(); Animated.timing(circleRadius, { toValue: 91 + index * animateConstant, - }).start(); + duration: 350, + }).start(() => { + if (this.state.animating) { + setTimeout(() => { + if (this.state.animating) { + this.setState({ animating: false }); + } + }, 350); + } + }); }; render() { const { children, backgroundColor, circleBackgroundColor, style } = this.props; - const { selectedIndex, pathX, circleRadius } = this.state; + const { selectedIndex, pathX, circleRadius, animating } = this.state; return ( @@ -102,6 +107,7 @@ export default class TabBar extends Component { key: i, index: i, showIcon: true, + animating, }); })} @@ -140,8 +146,20 @@ export default class TabBar extends Component { } } -const TabBarItem = ({ icon, selectedIcon, index, selected, onPress, showIcon, disabled }) => { +const TabBarItem = ({ + icon, + selectedIcon, + index, + selected, + onPress, + showIcon, + disabled, + animating, +}) => { if (selected) { + if (animating) { + return ; + } if (showIcon) { return (