155 lines
4.2 KiB
JavaScript
155 lines
4.2 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
SafeAreaView,
|
|
Text,
|
|
View,
|
|
TouchableOpacity,
|
|
Image,
|
|
TextInput,
|
|
Keyboard,
|
|
} from 'react-native';
|
|
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
|
|
import Toast, {DURATION} from 'react-native-easy-toast';
|
|
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
|
|
import {colors} from './src/assets/styles/colors-theme';
|
|
import { inject, observer } from "mobx-react"
|
|
import { observable, makeObservable } from 'mobx'
|
|
Icon.loadFont();
|
|
const MyTabBar = inject("appStore")(observer(class MyTabBar extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.store = props.appStore;
|
|
}
|
|
|
|
langLabelReturn(){
|
|
switch(this.props.label){
|
|
case 'home':
|
|
return this.store.text.home
|
|
break;
|
|
case 'info':
|
|
return this.store.text.rentTools
|
|
break;
|
|
|
|
case 'history':
|
|
return this.store.text.history
|
|
break;
|
|
|
|
case 'profile':
|
|
return this.store.text.profile
|
|
break;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
langLabelReturn(label){
|
|
switch(label){
|
|
case 'main':
|
|
return this.store.text.main
|
|
break;
|
|
case 'myfavourite':
|
|
return this.store.text.myfavourite
|
|
break;
|
|
|
|
case 'shoppingHistory':
|
|
return this.store.text.shoppingHistory
|
|
break;
|
|
|
|
case 'acAndSetting':
|
|
return this.store.text.acAndSetting
|
|
break;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
render() {
|
|
var {state, descriptors, navigation, logined} = this.props;
|
|
return (
|
|
<View style={{flexDirection: 'row', backgroundColor: colors.mainColor}}>
|
|
{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;
|
|
switch (route.name) {
|
|
case 'Main':
|
|
iconName = 'home-variant';
|
|
break;
|
|
case 'BuyHistory':
|
|
iconName = 'cart';
|
|
break;
|
|
case 'Favorite':
|
|
iconName = 'heart';
|
|
break;
|
|
case 'Profile':
|
|
iconName = 'account-circle';
|
|
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 == 'Profile' && !this.store.logined) {
|
|
navigation.navigate('Signin');
|
|
} else if (route.name == 'Favorite' && !this.store.logined) {
|
|
navigation.navigate('Signin');
|
|
} else if (route.name == 'BuyHistory' && !this.store.logined) {
|
|
navigation.navigate('Signin');
|
|
} 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: 5,
|
|
}}>
|
|
<Icon
|
|
name={iconName}
|
|
size={25}
|
|
color={isFocused ? 'white' : '#C5DC77'}
|
|
/>
|
|
<Text style={{color: isFocused ? 'white' : '#C5DC77', fontSize: 12}}>
|
|
{this.langLabelReturn(label)}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
}
|
|
}))
|
|
export default MyTabBar
|