/*
 * @Description: 
 * @Author: charles
 * @Date: 2021-11-25 17:51:16
 * @LastEditors: charles
 * @LastEditTime: 2021-11-26 15:14:38
 */
import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Home from './pages/home'
import Record from './pages/record';
import Mine from './pages/mine';
import RecordDetails from './pages/record/Details';
import RecordChart from './pages/record/Chart'

function App(){
  // 资讯相关的路由
  const Stack = createNativeStackNavigator();
  const Tab = createBottomTabNavigator();

  function RecordStackScreen() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Record" component={Record} options={{
          headerShown:false
        }}/>
        <Stack.Screen name="RecordDetails" component={RecordDetails} options={{headerTitle:'记录详情'}}/>
        <Stack.Screen name="RecordChart" component={RecordChart} options={{headerTitle:'图表'}}/>
      </Stack.Navigator>
    );
  }


  return (
    <NavigationContainer>
      <Tab.Navigator 
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName = 'home'
            switch (route.name) {
              case "Home":
                iconName = 'home'
                break;
              case "RecordList":
                iconName = 'list'
                break;
              case "Mine":
                iconName = 'person'
                break;
              default:
                break;
            }
            size = 24
            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: 'teal',
          tabBarInactiveTintColor: 'gray',
        })}>
        <Tab.Screen 
          name="Home" 
          component={Home} 
          options={{
            title:"首页",
            headerShown:false
          }}/>
        <Tab.Screen 
          name="RecordList" 
          component={RecordStackScreen} 
          options={{
            title:"记录",
            headerShown:false
          }} />
        <Tab.Screen 
          name="Mine" 
          component={Mine} 
          options={{
            title:"我的",
            headerShown:false,
          }} />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

export default App;