webapp/src/navigation/AppNavigator.tsx

82 lines
2.3 KiB
TypeScript

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import TaskListScreen from '../screens/TaskListScreen';
import TaskEditScreen from '../screens/TaskEditScreen';
import RunScreen from '../screens/RunScreen';
import EditScreen from '../screens/EditScreen';
import SettingsScreen from '../screens/SettingsScreen';
const HomeStack = createStackNavigator();
const Tab = createBottomTabNavigator();
function HomeStackNavigator() {
return (
<HomeStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#1a1a1a',
},
headerTintColor: '#ffffff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
>
<HomeStack.Screen
name="TaskList"
component={TaskListScreen}
options={{ title: '任务列表' }}
/>
<HomeStack.Screen
name="TaskEdit"
component={TaskEditScreen}
options={{ title: '编辑任务' }}
/>
</HomeStack.Navigator>
);
}
export default function AppNavigator() {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarStyle: {
backgroundColor: '#1a1a1a',
borderTopColor: '#333',
},
tabBarIcon: ({ color, size }) => {
let iconName: string;
if (route.name === '主页') {
iconName = 'home';
} else if (route.name === '运行') {
iconName = 'play-arrow';
} else if (route.name === '编辑') {
iconName = 'edit';
} else if (route.name === '设置') {
iconName = 'settings';
} else {
iconName = 'help';
}
return <MaterialIcons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: '#2196F3',
tabBarInactiveTintColor: 'gray',
headerShown: false,
})}
>
<Tab.Screen
name="主页"
component={HomeStackNavigator}
options={{ headerShown: false }}
/>
<Tab.Screen name="运行" component={RunScreen} />
<Tab.Screen name="编辑" component={EditScreen} />
<Tab.Screen name="设置" component={SettingsScreen} />
</Tab.Navigator>
);
}