Ground17's Playground

React Native의 장점이라 한다면 자신이 직접 Native 코드를 작성할 필요 없이 이미 만들어진 패키지를 설치해서 그대로 쓰면 된다는 것입니다. 이미 아시는 분들에겐 매우 쉬운, React Native에서의 패키지 설치 방법을 알려드릴까 합니다. 1) https://www.npmjs.com 홈페이지에서 원하는 패키지 찾기 2) 터미널에 'npm install (패키지 이름)' 형태로 입력 ( react-native link 는 react-native 버전이 0.60 미만인 경우에서만 진행 ) 2-1) iOS의 경우 cd ios를 한 뒤 pod install 명령어를 터미널에 입력 3) package.json 파일을 열어 dependencies 안에 패키지 이름이 제대로 들어있나 확인 4) 설치한 패키지의 파일을 import해준 뒤 npmjs.com 안 가이드라인대로 코드 작성 한꺼번에 패키지를 설치할 때는 'npm install (패키지 이름1) (패키지 이름2) ... (패키지 이름n)'의 형태로 입력해주시면 됩니다.

일단, 이 글에서는 제가 자주 쓰는 화면 전환법들만 다뤘음을 밝히며, 더 자세한 사항을 알아보고 싶으신 분들은 아래 공식 문서나 다른 문서들을 참고하시는 것이 더 좋을 것입니다. https://reactnavigation.org/docs/getting-started 모든 과정을 시작하기 앞서, 아래 패키지들을 설치해줍니다. npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view 만약 tab view와 stack view도 사용한다면 아래 패키지들도 추가로 설치해줍니다. npm install @react-navigation/bottom-tabs @react-navigation/stack 아래는 기본적인 화면을 구성하는 코드입니다.(function 형식보단 class 형식이 더 많습니다) App.js import 'react-native-gesture-handler' ; import { NavigationContainer } from '@react-navigation/native' ; import { createStackNavigator } from '@react-navigation/stack' ; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' ; import Icon from 'react-native-vector-icons/MaterialIcons' ; import Login from './assets/screens/Login' ; const Stack = createStackNavigator (); const Tab = createBottomT...