반응형
import {createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import {NavigationContainer } from "@react-navigation/native"
// 하단바에 들어갈 아이콘 이미지
import img_post from "../source/post.png"
import img_user from "../source/user.png"
const BottomTab = createBottomTabNavigator();
function App(){
return(
<View style={{flex: 1}}>
<View>
<Text>Test</Text>
</View>
<NavigationContainer>
<BottomTab.Navigator initialRouteName="Post" screenOptions={{
headerShown: false, // 헤더 타이틀 없애기
}}>
<BottomTab.Screen name="Post" component={Post} options={{tabBarIcon: () => {
return <Image source={img_post} style={{width: 20, height: 20}}></Image>
}}}/>
<BottomTab.Screen name="Home" component={Home} options={{tabBarIcon: () => {
return <Image source={img_user} style={{width: 20, height: 20}}></Image>
}}}/>
</BottomTab.Navigator>
</NavigationContainer>
</View>
);
}
결과 :
반응형