Fixed auto navigate action for tabbar

This commit is contained in:
Mustafa Buyukcelebi 2019-10-04 11:02:33 +03:00
parent a927c70f77
commit 7ca33bfb70
3 changed files with 16 additions and 28 deletions

View File

@ -2,15 +2,10 @@ import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
wrapper: {
flexDirection: 'row',
height: 56,
width: '$deviceWidth',
backgroundColor: '$primaryBackgroundColor',
borderTopWidth: 0.1,
shadowOpacity: 0.1,
elevation: 10,
},
safeArea: {
backgroundColor: '$primaryBackgroundColor',
position: 'absolute',
bottom: 0,
left: 0,
zIndex: 99999,
},
});

View File

@ -71,20 +71,12 @@ class BottomTabBarView extends PureComponent {
} = this.props;
return (
<SafeAreaView
style={{
position: 'absolute',
bottom: 0,
left: 0,
zIndex: 99999,
width: Dimensions.get('window').width,
}}
>
<SafeAreaView style={styles.wrapper}>
<TabBar
selectedIndex={0}
selectedIndex={index}
circleBackgroundColor="#357ce6"
backgroundColor="#f6f6f6"
onChange={index => this._jumpTo(routes[index])}
onChange={i => this._jumpTo(routes[i])}
activeTintColor={activeTintColor}
inactiveTintColor={inactiveTintColor}
>

View File

@ -1,11 +1,4 @@
import {
StyleSheet,
View,
TouchableHighlight,
Animated,
Dimensions,
SafeAreaView,
} from 'react-native';
import { StyleSheet, View, TouchableHighlight, Animated, Dimensions } from 'react-native';
import React, { Component } from 'react';
import Svg, { Circle, Path } from 'react-native-svg';
@ -58,6 +51,14 @@ export default class TabBar extends Component {
});
}
componentDidUpdate(prevProps) {
const { selectedIndex } = this.props;
if (prevProps.selectedIndex !== selectedIndex) {
this._onPress(selectedIndex);
}
}
_onPress = (i, disabled) => {
const { onChange } = this.props;
if (!disabled) {