1. React Native Debugger 개발한 코드를 디버깅할 때 유용한 툴이다. 지금까지는 콘솔창을 이용해서 변수에 어떤 값이 들어가 있는지, 화면 전환 시 패싱된 파라미터값은 무엇인지 등을 확인했었는데 React Native Debugger를 통해서 좀 더 손쉽게 확인이 가능하다. react native debugger는 stand alone app 이기 때문에 그냥 설치 파일 다운로드 후에 설치하고 실행하면 된다. https://github.com/jhen0409/react-native-debugger GitHub - jhen0409/react-native-debugger: The standalone app based on official debugger of React Native, and ..

1. XY Animation 생성하기 상하좌우로 움직이는 애니메이션에 대해 배워보자. 우선 새로운 프로젝트를 생성한다. 항상 그렇듯 Add folder to workspace 하고 App.js 를 수정하자. src폴더를 새로 만들고 그 안에 Animation01.js 파일을 만든다. Animation01.js는 AnimOne을 export하는데 가로, 세로 100짜리 하늘색 정사각형을 만든다. App.js에서 AnimOn을 import 하고 을 뷰에 넣어준다. Animation을 넣어주기 위해 Animation01.js에서 Animated를 import 한다. 그리고 constructor를 하나 만들어 준다. super는 일단 그냥 두고 하늘색 정사각형이 움직이기 시작하는 starting point를 써..

1. Image Picker 설치 react-native init RN_ImagePicker 위의 명령어로 새로운 프로젝트를 하나 만든다. 프로젝트 생성이 완료되면 해당 프로젝트로 이동하고 아래 명령어를 통해 Image Picker library를 설치해준다. npm install --save react-native-image-picker 설치가 완료되면 ios 폴더로 가서 pod install 을 실행한다. cd ios pod install cd .. 파일로 가서 Add folder to workspace를 통해 해당 폴더를 추가한다. 안드로이드는 추가로 해줄 일이 있다. 카메라랑 라이브러리에 접근 가능하도록 접근권한을 줘야 한다. /android/app/src/main/AdndroidManifest...

15. Nesting Navigators(화면 구조 설계) Stack, Drawer, Tab 여러 개의 navigator를 같이 쓰는 방법을 알아보자. react navigation에서는 navigator를 nesting한다고 표현한다. Navigator들과 스크린 간의 구조를 잡는 건데 어떤 structure를 잡느냐에 따라 다양한 설계가 가능하다. 1. stack, tab nesting stack navigator는 하위에 stack screen을 갖는데 여기서 하나의 stack screen에 컴포넌트로 tab navigator와 tab screen을 넣으면 된다. 자세한 구조는 아래 App.js 에서 주석으로 적어뒀다. MainScreen은 tab navigator와 하위의 tab screen들을 ..

15. React Native Vector Icons 활용 https://github.com/oblador/react-native-vector-icons GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling. Customizable Icons for React Native with support for image source and full styling. - GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for i..

14. React Native Vector Icons 설치 https://github.com/oblador/react-native-vector-icons GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling. Customizable Icons for React Native with support for image source and full styling. - GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for i..