12. [Tab] 설치 및 화면 Linking tab navigator는 화면 상단이나 하단에 탭을 생성해서 터치 시에 해당 스크린으로 이동하게 도와주는 navigator이다. https://reactnavigation.org/docs/tab-based-navigation https://reactnavigation.org/docs/tab-based-navigation/ reactnavigation.org 공식문서 보고 설치 따라서 하고 또다시 import 와 객체를 만들어 준 뒤에 사용! home_tab.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ i..

9. [Drawer] 설치 및 화면 Linking 수많은 에러를 맞이했지만 이를 해결한 과정은 이전의 error/solution 4번에 정리해뒀다. 2022.01.05 - [React Native/Basic] - [React Native] error/solution home_drawer.js /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {Component} from 'react'; import {StyleSheet, Text, View, Button} from 'react-native'; class DrawerHomeScreen e..

2. React Navigation 설치 https://reactnavigation.org/docs/getting-started https://reactnavigation.org/docs/getting-started/ reactnavigation.org 위 사이트를 들어가면 설치 과정이 상세히 나온다. react-native init 위의 명령어로 새로운 패키지를 만들어 준 뒤, 아래의 코드들을 순서대로 터미널에 작성하여 초기 설치를 진행한다. npm install @react-navigation/native npm install react-native-screens react-native-safe-area-context 버전이 업데이트되면서 linking 과정이 자동적으로 수행되기 때문에 다른 것들은 ..

1. React Native 기본 원리 RN - 모바일 웹/앱, 하이브리드 앱이 아닌 native 앱을 제작하기 위한 오픈소스 프레임워크 ios 네이티브 앱은 object c, swift를 ios에 타겟팅해주는 컴파일러 존재. android의 경우 java, kotlin을 안드로이드에 타겟팅해주는 컴파일러 존재. High Level 측면 크로스 플랫폼인 RN은 단지 javascript 개발 코드를 각 os 플랫폼에 타겟팅해줌. Low Level 측면 RN에서는 앱을 빌드할 때 앱의 전체 로직을 가지는 js bundle을 만들고 이 번들을 각 플랫폼에 심어주게 됨. JS 번들은 JS Thread에 의해 실행되는데 각 플랫폼에서 앱을 실행하기 위한 Native Thread는 JS Thread와 직접 커뮤니케..