본문 바로가기
  • Let's study

BottomNavigation3

[React-Native] Stack과 Tab Navigation 같이 쓰기 2022.10.17 - [Android/React-Native] - [React-Native] Bottom Navigation [React-Native] Bottom Navigation 설치해야하는 모듈 npm install @react-navigation/native npm install @react-navigation/bottom-tabs 모듈 추가 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {NavigationC.. hyemzzi.tistory.com 2022.10.20 - [Android/React-Native] - [React-Native] Stack Navigation [React-Native] .. 2022. 10. 22.
[React-Native] Bottom Navigation 설치해야하는 모듈 npm install @react-navigation/native npm install @react-navigation/bottom-tabs 모듈 추가 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {NavigationContainer} from '@react-navigation/native'; Navigation 사용하기 Bottom Naviagtion을 사용하기 위해 Navigator()를 선언해준다. const Tab = createBottomTabNavigator(); 다음으로는 Tab으로 사용할 화면 2개를 만들어두자. Home.js import React from 'react'; i.. 2022. 10. 17.
[Kotlin] Bottom Navigation 바텀 네비게이션 메뉴 파일 생성 res에 menu 폴더를 하나 만든다. menu 폴더 안에 바텀 네비게이션의 탭 개수와 들어갈 아이콘이나 텍스트를 작성한 xml 파일을 만든다. 개수가 탭의 개수이며 탭은 다음 코드로 수정할 수 있다. android:icon="@drawable/ic_face" // 바텀 네비게이션에 들어갈 아이콘 android:title="학습하기" // 아이콘 밑에 들어갈 텍스트 Activity 생성 바텀 네비게이션을 적용할 Activity 파일을 만든다. (ex. MainActivity) 함께 만들어진 xml 파일에 다음과 같이 코드를 작성한다. 탭 별 Fragment 생성 탭을 선택할 때마다 바뀔 Fragment를 탭 개수만큼 생성해준다. ex) StudyFragment, Cours.. 2022. 8. 17.