-
[React Native] 탭 구현하기졸업프로젝트 2020. 12. 2. 10:47
이 글은 여기를 참고하여 작성되었습니다.
지난번 버튼을 눌러 화면을 이동하는 법에 이어 탭을 구현해 보았습니다.
React Native에서 탭 자체는 createBottomTabNavigator를 이용하여 만든 후
createAppContainer에 생성한 TabNavigator를 담아 export 하는 방식으로 만든다
App.js
import {createAppContainer} from 'react-navigation'; import React from 'react'; import {createBottomTabNavigator} from 'react-navigation-tabs'; import Ionicons from 'react-native-vector-icons/Ionicons'; import Mypage from './Mypage'; import Mainpage from './Mainpage'; import Searchpage from './Searchpage'; const TabNavigator = createBottomTabNavigator({ Mainpage: { screen: Mainpage, color:'#f08080', }, Searchpage: { screen: Searchpage, }, Mypage: { screen: Mypage, }, }, { defaultNavigationOptions: ({navigation}) => ({ tabBarIcon: ({horizontal}) => { const {routeName} = navigation.state; let iconName; if (routeName === 'Mypage') { iconName = 'ios-person'; } else if (routeName === 'Mainpage') { iconName = 'ios-book'; }else if (routeName === 'Searchpage') { iconName = 'ios-search'; } return ( <Ionicons name={iconName} size={horizontal ? 28 : 35} color='#00bfff' /> ); }, tabBarOptions: { style: {height:60}, color:"#f08080", } }), }, ); export default createAppContainer(TabNavigator);
클릭된 routeName에 맞게 icon과 색상을 설정해주면 아래 화면같이 나타난다.
'졸업프로젝트' 카테고리의 다른 글
[Expo] Android apk 파일 빌드하기 (0) 2020.12.10 [React Native] 3X3 FlatList 배열 만들기 (0) 2020.12.02 [React Native] 협업하기 (git 충돌 해결) (0) 2020.12.02 [React Native] 버튼 눌러 페이지 이동하기 (0) 2020.11.28 시스템 아키텍쳐 (React-Native를 선택한 이유) (0) 2020.11.27