146 lines
4.5 KiB
JavaScript
146 lines
4.5 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
SafeAreaView,
|
|
Text,
|
|
View,
|
|
TouchableOpacity,
|
|
Image,
|
|
TextInput,
|
|
Keyboard,
|
|
} from 'react-native';
|
|
import { inject, observer } from 'mobx-react';
|
|
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
|
|
import { observable } from 'mobx';
|
|
import { colors } from './src/assets/styles/colors-theme';
|
|
import { images } from './src/assets/images/index';
|
|
|
|
Icon.loadFont();
|
|
|
|
const MyTabBar = inject("appStore")(observer(class MyTabBar extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.store = props.appStore;
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
var { state, descriptors, navigation, logined } = this.props;
|
|
return (
|
|
<View style={{ backgroundColor: colors.MAIN }}>
|
|
<View style={{
|
|
flexDirection: 'row', backgroundColor: 'black', height: 66,
|
|
borderTopLeftRadius: 20,
|
|
borderTopRightRadius: 20,
|
|
}}>
|
|
{state.routes.map((route, index) => {
|
|
const { options } = descriptors[route.key];
|
|
const label =
|
|
options.tabBarLabel !== undefined
|
|
? options.tabBarLabel
|
|
: options.title !== undefined
|
|
? options.title
|
|
: route.name;
|
|
let iconName;
|
|
let focus
|
|
switch (route.name) {
|
|
case 'Main':
|
|
iconName = 'home';
|
|
focus = 'home';
|
|
break;
|
|
case 'Category':
|
|
iconName = images.ICON_LIST;
|
|
focus = images.ICON_LIST_FOCUS;
|
|
break;
|
|
// case 'Favourite':
|
|
// iconName = images.NAV_FAV;
|
|
// focus = images.NAV_FAV_FOCUS;
|
|
// break;
|
|
case 'Cart':
|
|
iconName = images.NAV_CART;
|
|
focus = images.NAV_CART_FOCUS;
|
|
break;
|
|
case 'Setting':
|
|
iconName = images.NAV_PROFILE;
|
|
focus = images.NAV_PROFILE_FOCUS;
|
|
break;
|
|
}
|
|
|
|
const isFocused = state.index === index;
|
|
|
|
const onPress = () => {
|
|
const event = navigation.emit({
|
|
type: 'tabPress',
|
|
target: route.key,
|
|
});
|
|
|
|
if (!isFocused && !event.defaultPrevented) {
|
|
console.log(route.name);
|
|
if (route.name == 'Setting' && !this.store.logined) {
|
|
navigation.navigate('Login');
|
|
} else {
|
|
navigation.navigate(route.name);
|
|
}
|
|
}
|
|
};
|
|
|
|
const onLongPress = () => {
|
|
navigation.emit({
|
|
type: 'tabLongPress',
|
|
target: route.key,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
accessibilityRole="button"
|
|
accessibilityStates={isFocused ? ['selected'] : []}
|
|
accessibilityLabel={options.tabBarAccessibilityLabel}
|
|
testID={options.tabBarTestID}
|
|
onPress={onPress}
|
|
onLongPress={onLongPress}
|
|
style={{
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginTop: 5,
|
|
marginBottom: 15,
|
|
}}>
|
|
{route.name == 'Main' ? (<Icon name={iconName} color={isFocused ? colors.MAIN : 'white'} size={28} />) : (<Image style={{ width: 25, height: 25, resizeMode: "contain", }} source={isFocused ? focus : iconName} />)}
|
|
|
|
|
|
{label == 'Cart' ? (
|
|
<View
|
|
style={{
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
position: 'absolute',
|
|
top: 5,
|
|
right: 25,
|
|
}}>
|
|
<Icon name="circle" color={'red'} size={18} />
|
|
<Text
|
|
style={{
|
|
position: 'absolute',
|
|
top: 4,
|
|
fontWeight: '800',
|
|
fontSize: 8,
|
|
color: 'white',
|
|
}}>
|
|
{this.store.shoppingCart.length}
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<View />
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}))
|
|
|
|
export default MyTabBar
|