85 lines
3.0 KiB
JavaScript
85 lines
3.0 KiB
JavaScript
import {StyleSheet, View} from 'react-native';
|
|
import {NavigationContainer} from "@react-navigation/native";
|
|
import 'react-native-gesture-handler';
|
|
import {createStackNavigator} from "@react-navigation/stack";
|
|
import Home from "./screens/home";
|
|
import Login from "./screens/login";
|
|
import Event from "./screens/event";
|
|
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
|
|
|
|
import TaskIconActive from "./assets/taskIconActive.svg";
|
|
import TaskIcon from "./assets/taskIconInactive.svg"
|
|
import NotificationIconActive from "./assets/notificationActive.svg";
|
|
import NotificationIconInactive from './assets/notificationInactive.svg'
|
|
|
|
const generateTabBarIcon = ({focused, style}) => {
|
|
const styles = {
|
|
taskIcon: {
|
|
focused: <TaskIconActive width={25} height={25}/>,
|
|
default: <TaskIcon width={25} height={25}/>
|
|
},
|
|
|
|
notificationIcon: {
|
|
focused: <NotificationIconActive width={25} height={25}/>,
|
|
default: <NotificationIconInactive width={25} height={25}/>
|
|
}
|
|
}
|
|
|
|
return !!focused ? styles[style].focused : styles[style].default
|
|
|
|
}
|
|
|
|
const Stack = createStackNavigator();
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
|
|
const HomeStack = () => (
|
|
<Stack.Navigator initialRouteName={"Home"} screenOptions={{headerShown: false}}>
|
|
<Stack.Screen name="Login" component={Login}/>
|
|
<Stack.Screen name="Home" component={Home}/>
|
|
<Stack.Screen name="Event" component={Event}/>
|
|
</Stack.Navigator>
|
|
|
|
)
|
|
|
|
export default function App() {
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<NavigationContainer>
|
|
<Tab.Navigator initialRouteName={"HomeStack"} screenOptions={{
|
|
headerShown: false,
|
|
tabBarActiveTintColor: '#E5352D',
|
|
tabBarInactiveTintColor: "rgba(100, 101, 103, 0.5)",
|
|
tabBarLabelStyle: {fontSize: 10, fontWeight: "bold"}
|
|
}}>
|
|
<Tab.Screen name="HomeStack" component={HomeStack} options={{
|
|
tabBarLabel: "Задания",
|
|
tabBarIcon: ({focused}) => generateTabBarIcon({focused, style: "taskIcon"})
|
|
}}/>
|
|
<Tab.Screen name="Notification"
|
|
component={() => <View></View>}
|
|
options={
|
|
{
|
|
tabBarLabel: "Уведомления",
|
|
tabBarIcon: ({focused}) => generateTabBarIcon({
|
|
focused,
|
|
style: "notificationIcon"
|
|
})
|
|
}
|
|
}
|
|
/>
|
|
</Tab.Navigator>
|
|
|
|
</NavigationContainer>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#fff',
|
|
},
|
|
});
|