yeon's 👩🏻‍💻

- Stack.Navigator, Drawer.Navigator, Tab.Navigator 를 다 같이 쓰는 방법을 생각해보자 -> React Navigation에서는 이를 Navigator들을 nesting한다고 표현한다. - navigator들과 screen들 간의 구조 잡기 - 어떤 structure를 설계하느냐에 따라 다양한 조합 가능 MainScreen = () => { return ( ({ tabBarLabel: route.name, tabBarIcon: ({focused})=>( TabBarIcon(focused, route.name) ) })} > ) } - MainScreen이라는 함수는 와 그 하위의 들을 return 함 - 이전의 안에서 만든 코드를 복사해온다. -> 이 전체가 Sta..

설치 과정이 꽤나 복잡하고 ,,, 중간에 에러도 나서 따로 정리를 안 했었다 !!! 바로 활용으로 넘어가기 힛 https://oblador.github.io/react-native-vector-icons/ 사이트를 참조해보면 Ionicons에서 지원하는 다양한 아이콘들을 확인해볼 수 있다. * 참고로 우리는 다양한 아이콘들 중 Ionicons 를 사용할 것 !! - 지금까지는 TabBarIcon이라는 함수에서 우리가 다운로드 받은 그림의 경로를 할당해 출력했다. - 이번에는 내장된, 아니 지원하는 아이콘 자체를 불러와보자 !! import Ionicons from 'react-native-vector-icons/dist/Ionicons'; - 모듈부터 불러오기 const TabBarIcon = (focu..

* 과 마찬가지로 도 각 스크린의 component에 개별 styling을 하지 않는다. -> 모두 공통적인 스타일 적용함 -> 태그 안에 작성 -> 에 옵션을 주자 - activeBackgroundColor / activeTintColor : 선택되었을 때 배경색과 글씨색 - inactiveTintColor : 선택되어지지 않은 글자색 스크린을 하나 추가해보자 - message_tab.js라는 파일 생성 import TabMessageScreen from './src/message_tab'; ... 각 탭에 (text 대신) 그림을 삽입해보자 - 그림을 삽입함과 동시에 선택된 탭의 그림을 좀 더 크게 만드는 효과 주기 screenOptions={({route})=>({ tabBarLabel: route..

https://reactnavigation.org/docs/tab-based-navigation 사이트를 참조해 설치 npm install @react-navigation/bottom-tabs * Tab : 화면 상단이나 하단에 tab을 생성해 터치 시 해당 스크린으로 이동하게 도와줌 우리는 스크린 아래에 tab을 생성할 것이다. import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; ... const Tab = createBottomTabNavigator(); - 사용할 module을 import 해주고, import한 함수 할당하기 home_tab.js & user_tab.js 라는 새로운 파일 생성 import TabHom..