98 lines
3.1 KiB
JavaScript
98 lines
3.1 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 {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
|
|
import {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
|
|
style={{height: 80}}
|
|
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>
|
|
);
|
|
}
|