expo start -c
もしくは
react-native start --reset-cache

import React from 'react'
import { NavigationContainer, RouteProp } from '@react-navigation/native'
import { createStackNavigator} from '@react-navigation/stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { FontAwesome } from '@expo/vector-icons'


import NewsScreen from './screens/NewsScreen'
import DetailScreen from './screens/DetailScreen'
import WeatherScreen from './screens/WeatherScreen'

const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()

type GlyphNames = React.ComponentProps<typeof FontAwesome>['name']
type Route = RouteProp<Record<string, object | undefined>, string>

const newsStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ニュース" component={NewsScreen} />
      <Stack.Screen name="詳細ページ" component={DetailScreen} />
    </Stack.Navigator>
  )
}

const weatherStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="天気予報" component={WeatherScreen} />
    </Stack.Navigator>
  )
}

const screenOptions = ({ route }: { route: Route }) => ({
  tabBarIcon: ({ color, size }: { color: string, size: number}) => {
    let iconName: GlyphNames | undefined

    if (route.name === 'ニュース') {
      iconName = 'newspaper-o'
    } else if (route.name === '天気予報') {
      iconName = 'sun-o'
    }
    return <FontAwesome name={iconName} size={size} color={color} />
  }
})

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={screenOptions}>
        <Stack.Screen name="ニュース" component={newsStack} />
        <Stack.Screen name="天気予報" component={weatherStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;