Skip to content

C
clone_excelso
Commit b49a1992 authored by Fred's avatar Fred
Browse files
Options

fix bottom navigation

parent f968d56a
Hide whitespace changes
Inline Side-by-side
Showing with 106 additions and 31 deletions
view/Auth.js
View file @ b49a1992
import * as React from 'react'; import * as React from 'react';
import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack'; import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { View, Text, Image, Alert } from 'react-native'; import { View, Text, Image, Alert, TouchableOpacity } from 'react-native';
import ActionType from '../redux/globalActionType'; import ActionType from '../redux/globalActionType';
import MenuSelection from './MenuSelection'; import MenuSelection from './MenuSelection';
import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons'; import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
...@@ -61,9 +61,77 @@ enableScreens(); ...@@ -61,9 +61,77 @@ enableScreens();
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
function HomePage({ navigation }) { const BottomNavigation = ({ state, descriptors, navigation }) => {
return ( return (
<Tab.Navigator <View style={{ flexDirection: 'row' }}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
let icon = require('../assets/icon/icon-home.png')
if (label === 'HOME') {
icon = require('../assets/icon/icon-home.png')
} else if (label === 'MENU') {
icon = require('../assets/icon/icon-menu.png')
} else if (label === 'REWARDS') {
icon = require('../assets/icon/icon-rewards.png')
} else if (label === 'ORDER') {
icon = require('../assets/icon/icon-order.png')
} else if (label === 'OUTLETS') {
icon = require('../assets/icon/icon-outlets.png')
} else if (label === 'ACCOUNT') {
icon = require('../assets/icon/icon-account.png')
}
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityStates={isFocused ? ['selected'] : []}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1, alignItems: 'center', backgroundColor: 'white', borderTopWidth:1, borderTopColor: '#f0f0f0' }}
>
<Image key={icon} source={icon} style={{ height: 50, width: 50, tintColor: isFocused ? '#CFB368' : 'gray'}} />
</TouchableOpacity>
);
})}
</View>
)
}
function HomePage({navigation}) {
return (
<Tab.Navigator tabBar={props => <BottomNavigation {...props}/>}
// screenOptions={({ route }) => ({ // screenOptions={({ route }) => ({
// tabBarIcon: ({ focused, color, size }) => { // tabBarIcon: ({ focused, color, size }) => {
...@@ -89,37 +157,44 @@ function HomePage({ navigation }) { ...@@ -89,37 +157,44 @@ function HomePage({ navigation }) {
// }, // },
// })} // })}
screenOptions={({ route }) => ({ // screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => { // tabBarIcon: ({ focused, color, size }) => {
let iconName; // let iconName;
if (route.name === 'HOME') {
// iconName = focused ? 'ios-home' : 'ios-home'
return <Image source={require('../assets/icon/icon-home.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
} else if (route.name === 'MENU') {
// iconName = focused ? 'ios-paper' : 'ios-paper';
return <Image source={require('../assets/icon/icon-menu.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
} else if (route.name === 'REWARDS') {
// iconName = focused ? 'ios-gift' : 'ios-gift';
return <Image source={require('../assets/icon/icon-rewards.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
} else if (route.name === 'ORDER') {
// iconName = focused ? 'md-cart' : 'md-cart';
return <Image source={require('../assets/icon/icon-order.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
} else if (route.name === 'OUTLETS') {
// iconName = focused ? 'ios-cafe' : 'ios-cafe';
return <Image source={require('../assets/icon/icon-outlets.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
} else if (route.name === 'ACCOUNT') {
// iconName = focused ? 'account' : 'account';
return <Image source={require('../assets/icon/icon-account.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
}
// You can return any component that you like here! // console.log('name', route.name)
return <Ionicons name={iconName} size={size} color={color} />; // console.log('focused', focused)
}, // console.log('color', color)
// console.log('size', size)
})} // // console.log('nav', navigation)
// if (route.name === 'HOME') {
// // iconName = focused ? 'ios-home' : 'ios-home'
// return <Image source={require('../assets/icon/icon-home.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'MENU') {
// // iconName = focused ? 'ios-paper' : 'ios-paper';
// return <Image source={require('../assets/icon/icon-menu.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'REWARDS') {
// // iconName = focused ? 'ios-gift' : 'ios-gift';
// return <Image source={require('../assets/icon/icon-rewards.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'ORDER') {
// // iconName = focused ? 'md-cart' : 'md-cart';
// return <Image source={require('../assets/icon/icon-order.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'OUTLETS') {
// // iconName = focused ? 'ios-cafe' : 'ios-cafe';
// return <Image source={require('../assets/icon/icon-outlets.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// } else if (route.name === 'ACCOUNT') {
// // iconName = focused ? 'account' : 'account';
// return <Image source={require('../assets/icon/icon-account.png')} style={{ height: 50, width: 50 }} tintColor={focused ? '#CFB368' : 'gray'} />
// }
// // You can return any component that you like here!
// return <Ionicons name={iconName} size={size} color={color} />;
// },
// })}
tabBarOptions={{ activeTintColor: '#CFB368', inactiveTintColor: 'gray', showLabel: false }} // tabBarOptions={{ activeTintColor: '#CFB368', inactiveTintColor: 'gray', showLabel: false }}
> >
<Tab.Screen name="HOME" component={Home} /> <Tab.Screen name="HOME" component={Home} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment