Front-End🐣3 RN: StackNavigation 특정 화면에서 BottomNavigation 없애기 ❗️현재 구조BottomTabNav에 아래와 같이 하단바가 구성되어 있다. 그 중에서 채팅 부분을 ChattingNav로 연결했다. ChattingNav 안에는 ChattingList와 ChattingPage가 등록되어있다. ❓해결 과정ChattingList는 하단바가 보이고 목록을 선택했을 때 넘어가는 ChattingPage는 하단바가 없어졌으면 좋겠다. 찾아보니v6에서는 전체 TabNavigator가 아니라 Tab을 사라지게 할 화면을 Stack으로 가지고 있는 StackNavigator에서 설정을 해주면 된다. const ChattingNav = ({navigation,route}:any) => { React.useLayoutEffect(() => { const routeN.. 2024. 9. 29. [React]: router 화면 전환 시 스크롤 새로고침 router와 Link를 통해서 화면을 전환할 때 이전에 내린 스크롤이 그대로 유지되는 문제점이 있었다. 이러한 문제점을 해결하기 위해 useLocation과 window.scrollTo를 사용해서 화면을 전환할 때마다 스크롤이 초기화 되면서 맨 위의 화면을 나타나게 코드를 수정했다. 모든 routes는 App.js에서 구동되기 때문에 스크롤 새로고침 코드도 App.js에 작성해야 한다. import './App.css';import Main from './components/Main';import { BrowserRouter as Router, Routes, Route, useLocation} from 'react-router-dom';import ProjectPage from './componen.. 2024. 7. 9. RN: BottomTabNavigator 만들기 BottomTabNavigator를 사용하려면 패키치 몇개를 설치해야한다. npm install @react-navigation/bottom-tabs이것만 설치를 하면 앱을 실행했을 때 오류가 난다. npm install react-native-screensnpm install react-native-safe-area-context 위 두개도 같이 설치해준다.+ ios는 추가로 ios 폴더로 들어가서 pod install 해주기 import React from 'react';import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'import Free from '../pages/Free';import Search from '../page.. 2024. 7. 7. 이전 1 다음
