mirror of
https://github.com/ecency/ecency-mobile.git
synced 2025-01-06 22:19:41 +03:00
enhanced a bit for tabbar
This commit is contained in:
parent
c24cddbe76
commit
741ba49f10
@ -36,7 +36,6 @@ export default class TabBar extends Component {
|
|||||||
circleRadius: new Animated.Value(91 + selectedIndex * value),
|
circleRadius: new Animated.Value(91 + selectedIndex * value),
|
||||||
pathD: new Animated.Value(selectedIndex * value),
|
pathD: new Animated.Value(selectedIndex * value),
|
||||||
pathX: selectedIndex * value,
|
pathX: selectedIndex * value,
|
||||||
showIcon: true,
|
|
||||||
animateConstant: value,
|
animateConstant: value,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -72,15 +71,16 @@ export default class TabBar extends Component {
|
|||||||
_move = index => {
|
_move = index => {
|
||||||
const { animateConstant, pathD, circleRadius } = this.state;
|
const { animateConstant, pathD, circleRadius } = this.state;
|
||||||
|
|
||||||
this.setState({
|
this.setState({ selectedIndex: '' });
|
||||||
selectedIndex: index,
|
|
||||||
showIcon: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
Animated.timing(pathD, {
|
Animated.timing(pathD, {
|
||||||
toValue: 0 + index * animateConstant,
|
toValue: 0 + index * animateConstant,
|
||||||
duration: 450,
|
duration: 450,
|
||||||
}).start(() => this.setState({ showIcon: true }));
|
}).start(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setState({ selectedIndex: index });
|
||||||
|
}, 350);
|
||||||
|
});
|
||||||
Animated.timing(circleRadius, {
|
Animated.timing(circleRadius, {
|
||||||
toValue: 91 + index * animateConstant,
|
toValue: 91 + index * animateConstant,
|
||||||
}).start();
|
}).start();
|
||||||
@ -88,20 +88,19 @@ export default class TabBar extends Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { children, backgroundColor, circleBackgroundColor, style } = this.props;
|
const { children, backgroundColor, circleBackgroundColor, style } = this.props;
|
||||||
const { selectedIndex, showIcon, pathX, circleRadius } = this.state;
|
const { selectedIndex, pathX, circleRadius } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={style}>
|
<View style={style}>
|
||||||
<View style={styles.subContent}>
|
<View style={styles.subContent}>
|
||||||
{children.map((route, i) => {
|
{children.map((route, i) => {
|
||||||
const element = React.cloneElement(route, {
|
return React.cloneElement(route, {
|
||||||
selected: selectedIndex === i,
|
selected: selectedIndex === i,
|
||||||
onPress: this._onPress,
|
onPress: this._onPress,
|
||||||
key: i,
|
key: i,
|
||||||
index: i,
|
index: i,
|
||||||
showIcon,
|
showIcon: true,
|
||||||
});
|
});
|
||||||
return element;
|
|
||||||
})}
|
})}
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
@ -148,8 +147,10 @@ const TabBarItem = ({ icon, selectedIcon, index, selected, onPress, showIcon, di
|
|||||||
</TouchableHighlight>
|
</TouchableHighlight>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return <View style={styles.navItem} />;
|
return <View style={styles.navItem} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TouchableHighlight
|
<TouchableHighlight
|
||||||
underlayColor={'transparent'}
|
underlayColor={'transparent'}
|
||||||
|
Loading…
Reference in New Issue
Block a user