105 lines
3.2 KiB
JavaScript
105 lines
3.2 KiB
JavaScript
// Copyright 2023 The Casdoor Authors. All Rights Reserved.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
import React from 'react';
|
|
import { View, StyleSheet } from 'react-native';
|
|
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import { Text, BottomNavigation } from 'react-native-paper';
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import HomePage from "./HomePage";
|
|
import {CommonActions} from "@react-navigation/native";
|
|
import SettingPage from "./SettingPage";
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
export default function NavigationBar() {
|
|
return (
|
|
<Tab.Navigator
|
|
screenOptions={{
|
|
headerShown: false,
|
|
}}
|
|
tabBar={({ navigation, state, descriptors, insets }) => (
|
|
<BottomNavigation.Bar
|
|
navigationState={state}
|
|
safeAreaInsets={insets}
|
|
onTabPress={({ route, preventDefault }) => {
|
|
const event = navigation.emit({
|
|
type: 'tabPress',
|
|
target: route.key,
|
|
canPreventDefault: true,
|
|
});
|
|
|
|
if (event.defaultPrevented) {
|
|
preventDefault();
|
|
} else {
|
|
navigation.dispatch({
|
|
...CommonActions.navigate(route.name, route.params),
|
|
target: state.key,
|
|
});
|
|
}
|
|
}}
|
|
renderIcon={({ route, focused, color }) => {
|
|
const { options } = descriptors[route.key];
|
|
if (options.tabBarIcon) {
|
|
return options.tabBarIcon({ focused, color, size: 24 });
|
|
}
|
|
|
|
return null;
|
|
}}
|
|
getLabelText={({ route }) => {
|
|
const { options } = descriptors[route.key];
|
|
const label =
|
|
options.tabBarLabel !== undefined
|
|
? options.tabBarLabel
|
|
: options.title !== undefined
|
|
? options.title
|
|
: route.title;
|
|
|
|
return label;
|
|
}}
|
|
/>
|
|
)}
|
|
>
|
|
<Tab.Screen
|
|
name="Home"
|
|
component={HomePage}
|
|
options={{
|
|
tabBarLabel: 'Home',
|
|
tabBarIcon: ({ color, size }) => {
|
|
return <Icon name="home" size={size} color={color} />;
|
|
},
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Settings"
|
|
component={SettingPage}
|
|
options={{
|
|
tabBarLabel: 'Settings',
|
|
tabBarIcon: ({ color, size }) => {
|
|
return <Icon name="cog" size={size} color={color} />;
|
|
},
|
|
}}
|
|
/>
|
|
</Tab.Navigator>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
}); |