Tigercow.Door

이전글리액트 네이티브 #4_ 인스타그램(Instagram) UI 무작정 따라하기 (1)리액트 네이티브 #5_ 인스타그램(Instagram) UI 무작정 따라하기 (2)리액트 네이티브 #6_ 인스타그램(Instagram) UI 무작정 따라하기 (3)리액트 네이티브 #7_ 인스타그램(Instagram) UI 무작정 따라하기 (4) Githubhttps://github.com/doorBW/INSTA-by-react-native 안녕하세요. 문범우입니다.지난 포스팅을 통해 우리는 인스타그램에서 프로필화면의 상단부까지 UI를 따라해보았습니다. 이번 포스팅에서는, 프로필화면에서 하단 네개의 버튼을 구성하고, 네개의 버튼중 두개에 대해서 화면구성을 완성해보도록 하겠습니다. 제가 1편에서 소개해드렸던 영상의 강의는 해..

지난글리액트 네이티브 #4_ 인스타그램(Instagram) UI 무작정 따라하기 (1)리액트 네이티브 #5_ 인스타그램(Instagram) UI 무작정 따라하기 (2) Githubhttps://github.com/doorBW/INSTA-by-react-native 안녕하세요. 문범우입니다. 지난 포스팅에서는 Home 화면에 피드를 추가하는 과정까지 진행해보았습니다. 이번 포스팅에서는 Home 화면에서 상단에 있는 스토리바를 추가해보도록 하겠습니다.해당 포스트를 통해서 나오는 결과물은 아래와 같습니다. 1. 스토리바 만들기 우리는 스토리바를 추가하기 위해 HomeTab.js 에서 작업을 진행합니다.이전 포스팅을 통해 현재 HomeTab.js의 코드는 아래와 같습니다. 123456789101112131415..

안녕하세요. 문범우입니다.우리가 지금까지 두 차례의 포스팅에 거쳐서, 리액트 네이티브 개발 환경을 구성하는 방법과 리액트 네이티브에서의 아주 기본적인 내용에 대해서 알아보았습니다.이번 포스팅부터는 실제로 프로젝트를 시작하여 코드를 작성해도록 하겠습니다.1. 프로젝트 시작하기 먼저 우리는 첫번째 포스팅에서 Expo 를 설치하였습니다.설치한 Expo를 실행합니다. 위와 같은 기본 화면에서 Create new project를 누릅니다. 위와 같이 둘 중 하나를 고르는 화면과 함께 프로젝트 이름 및 경로를 설정할 수 있는 창이 나옵니다.일단 우리는 Blank를 선택하여 진행합니다.Tab Navigation은 추후에 다뤄보도록 하겠습니다.그리고 적절한 프로젝트 이름과 경로를 설정하여 Create를 누릅니다. 그럼..

안녕하세요. 문범우입니다.지난 포스팅에서 리액트 네이티브를 사용하기위해 기본적인 개발환경 구성을 진행하였습니다.이번 포스팅에서는, 바로 개발을 진행하기전에 리액트 네이티브에 관한 기본적인 이론들을 간단히 살펴보도록 하겠습니다.1. Component 위 코드는, 우리가 나중에 실제로 개발을 시작했을 때 처음에 세팅되는 코드입니다. 위의 코드를 통해 알 수 있는 점은 화면을 보여주는데 있어서 react나 기타 웹에서와 같이 div등과 같은 컴포넌트가 존재하지 않고, 특별하게 View, Text 와 같은 컴포넌트가 존재하는 것입니다. 다시말해, 우리는 react native에서 사용할 수 있는 컴포넌트들이 한정되어 있습니다.컴포넌트들에 대해 더 자세한 내용은 아래의 react native 공식 홈페이지에서 확..