locaft_mobile/components/BottomTab.js

79 lines
1.5 KiB
JavaScript

import React from 'react';
import {
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen'
import {Icon} from 'react-native-elements';
const Tab = createBottomTabNavigator();
function BottomTab() {
return (
<Tab.Navigator
screenOptions={{
"tabBarShowLabel": false,
"tabBarStyle": [{
"position": 'absolute',
"bottom": 10,
"left": 20,
"right": 20,
"elevation": 0,
"backgroundColor" : '#cdcdcd',
"borderRadius": 25,
"height": 50,
"width": "90%"
}]
}}
>
<Tab.Screen name="Home" component={HomeScreen} options={{
"tabBarIcon": ({focused}) => (
<Icon name='home-outline' type='ionicon' size={36} color='#206ba5' ></Icon>
)
}}/>
<Tab.Screen name="s" component={HomeScreen} options={{
"tabBarIcon": ({focused}) => (
<Icon name='search-outline' type='ionicon' size={36} color='#206ba5' ></Icon>
)
}}/>
<Tab.Screen name="r" component={HomeScreen} options={{
"tabBarIcon": ({focused}) => (
<Icon name='sliders' type='feather' size={36} color='#206ba5' ></Icon>
)
}}/>
<Tab.Screen name="t" component={HomeScreen} options={{
"tabBarIcon": ({focused}) => (
<Icon name='person-circle-outline' type='ionicon' size={36} color='#206ba5' ></Icon>
)
}}/>
</Tab.Navigator>
);
}
export default BottomTab;