import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import Map from './src/pages/Map';
import Pronunciation from './src/pages/Pronunciation';
import HomeScreen from './src/pages/HomeScreen';
import IsRecord from './src/pages/IsRecord';
import Footer from './src/components/footer';
type TabParamList = {
Map: undefined;
Prosecutor: undefined;
Home: undefined;
Recorded: undefined;
Profile: undefined;
};
const Tab = createBottomTabNavigator<TabParamList>();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator screenOptions={{ headerShown: false }}>
<Tab.Screen name="Map" component={Map} />
<Tab.Screen name="Prosecutor" component={Pronunciation} />
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Recorded" component={IsRecord} />
<Tab.Screen name="Profile" component={Pronunciation} />
</Tab.Navigator>
{/* <Footer /> */}
</NavigationContainer>
);
}
import React from 'react';
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import { useNavigation } from '@react-navigation/native';
import Home from '@/src/assets/images/icons/Home'
import Map from '@/src/assets/images/icons/Maping'
import Prosecutor from '@/src/assets/images/icons/Prosecutor'
import Recorded from '@/src/assets/images/icons/Recorded'
import Profile from '@/src/assets/images/icons/Profile'
import styled from 'styled-components/native';
type TabParamList = {
Map: undefined;
Prosecutor: undefined;
Home: undefined;
Recorded: undefined;
Profile: undefined;
};
export default function Footer() {
const navigation = useNavigation<BottomTabNavigationProp<TabParamList>>();
return (
<FooterContainer>
<FooterBar>
<FooterButton onPress={() => navigation.navigate('Map')} activeOpacity={0.6}>
<IconWrapper>
<Map />
</IconWrapper>
<FooterText>의료기관</FooterText>
</FooterButton>
<FooterButton onPress={() => navigation.navigate('Prosecutor')} activeOpacity={0.6}>
<IconWrapper>
<Prosecutor />
</IconWrapper>
<FooterText>검사</FooterText>
</FooterButton>
<FooterButton onPress={() => navigation.navigate('Home')} activeOpacity={0.6}>
<IconWrapper>
<Home />
</IconWrapper>
<FooterText>홈</FooterText>
</FooterButton>
<FooterButton onPress={() => navigation.navigate('Recorded')} activeOpacity={0.6}>
<IconWrapper>
<Recorded />
</IconWrapper>
<FooterText>기록</FooterText>
</FooterButton>
<FooterButton onPress={() => navigation.navigate('Profile')} activeOpacity={0.6}>
<IconWrapper>
<Profile />
</IconWrapper>
<FooterText>프로필</FooterText>
</FooterButton>
</FooterBar>
</FooterContainer>
);
}
const FooterContainer = styled.View`
position: absolute;
bottom: 0;
width: 100%;
background-color: white;
padding: 12px 0;
border-radius: 25px 25px 0 0;
box-shadow: 0px -4px 20px rgba(0, 0, 0, 0.6); /* rgba 제일 끝에꺼가 그림자 짙게하는거 */
elevation: 5;
`;
const FooterBar = styled.View`
width: 98%;
flex-direction: row;
justify-content: space-around;
padding: 1%;
`;
const FooterButton = styled.TouchableOpacity`
align-items: center;
`;
const IconWrapper = styled.View`
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
`;
const FooterText = styled.Text`
color:rgb(0, 0, 0);
font-weight: 500;
`;이렇게 연결을 했는데.. (NOBRIDGE) ERROR The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator.
Do you have a route named 'Home'?
This is a development-only warning and won't be shown in production.계속 이러한 오류가 떠요..
402
1
0
닥터핸·2025-03-06
해당 오류 "(NOBRIDGE) ERROR The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator." 는 주어진 TabParamList 에 정의된 name 과 실제 Tab.Screen 에서 사용한 name이 일치하지 않아서 발생할 가능성이 높습니다.현재 TabPa...