본문 바로가기
  • Let's study

react-native11

[React-Native] Tob Tabs Navigation 사용하기 모듈 설치 아래에서 없는 모듈만 깔아주자. npm install @react-navigation/native npm install @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view 사용방법 사용방법은 Stack 및 Bottom Navigation과 동일하기에 이미 navigation을 구현해봤다면 간단할 것이다. Tab.Screen에서 name은 화면의 별명, component은 화면을 구현하고 있는 컴포넌트 의미한다. 코드에 나와있는 3개의 화면은 따로 화면을 구현한 후 가져오기만 하면 된다. import { createMaterialTopTabNavigator } from '@react-navigation.. 2022. 10. 29.
[React-Native] Hook 오늘 React-Native를 사용함에 있어서 중요한 Hook에 대해 알아보자. Hook의 종류는 많지만 아래 5가지 정도만 알아도 충분하다고 생각한다. 1. useState 2. useEffect 3. useCallback 4. useMemo 5. useRef 리랜더링 조건 Hook은 랜더링과 밀접한 관련이 있으므로 리랜더링 되는 조건을 알고 있는 편이 좋다. 자신의 state가 변경될 때 부모 컴포넌트로부터 받은 props가 변경될 때 부모 컴포넌트가 리렌더링될 때 1. UseState 생명주기와 밀접한 연관이 있는 요소, 렌더링과 관련있는 값을 저장하기 좋다 const [state, setState] = useState(initialState); setState(newState); useState로.. 2022. 10. 27.
[React-Native] Drawer Navigation Custom 하기 2022.10.25 - [Android/React-Native] - [React-Native] Drawer Navigation [React-Native] Drawer Navigation 모듈 설치 npm install @react-navigation/drawer @react-navigation/native babel.config.js 파일에 아래 코드 추가 module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react.. hyemzzi.tistory.com Drawer Navigation을 만드는 건 이전 글을 참고해주세요! Drawer를 커스텀하는 것은 간단하다. 우선 원하는 디자인대로 코드를 짠다. Dra.. 2022. 10. 26.
[React-Native] Drawer Navigation 모듈 설치 npm install @react-navigation/drawer @react-navigation/native babel.config.js 파일에 아래 코드 추가 module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'] //추가 }; 코드 적용하기 위해 아래 코드 한 번 실행 npm start -- --reset-cache 사용방법 createDrawerNavigator를 사용하여 Drawer를 선언해준 뒤 아래처럼 코드를 짜서 사용할 수 있다. Screen 안에 들어가있는 name은 해당 화면의 별명이고 이 별명을 통해 화면을 왔다갔다 할 수 .. 2022. 10. 25.
[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] Stack Navigation 모듈 설치 npm install @react-navigation/native @react-navigation/stack import import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; Stack Navigation 사용하기 Stack Navigation을 사용하기 위해 Navigator()를 선언해준다. const Stack = createStackNavigator(); Home과 Mypage 화면을 대충 만들고 import 해서 가져온 뒤 Navigation을 사용할 파일 가장 바깥쪽을 NavigationContainer로 감싸.. 2022. 10. 20.