본문 바로가기

App/React Native6

React Native - 6. Shadow, Input handling, Alert ... Shadow shadow와 관련된 property는 5가지가 있다. - shadowColor : Shadow의 색깔 - shadowOffset : Shadow의 크기 - shadowRadius : Shadow가 blur되는 범위를 지정 - shadowOpacity : Shadow의 opacity - elevation : Shadow property는 원래 IOS 에만 적용되는 Property. elevation을 통해 shadow를 적용할 수 있다. 다만 IOS 처럼 불균등한 Shadow는 불가능하다. 하려면 react-native-shadow 컴포넌트를 이용하자. Input Handling input을 입력하게 되는 경우, Keyboard api가 자동으로 등장한다. 근데 이제 입력을 종료하려고 Inp.. 2020. 5. 15.
React Native - 5. 기초 개념 및 Styling Components React가 그렇듯, React Native도 앱에서 보여지는 구성요소들을 컴포넌트 단위로 분리하여 구성한다. 대신, React Native에 built-in으로 존재하는 Component를 이용하여 구성한다. Styling 웹이 아니기 때문에 css라는게 존재하지는 않는다. 다만, 문법은 css의 문법을 차용한다. CSS syntax를 기반으로, 몇몇 제한된 기능을 사용할 수 있다. RN에서 Styled-Component를 사용할 수 있다고 하니, 아마 이걸 쓰게 되지 않을까 싶다. Core Component 앱을 구성할 때, View를 통해 화면 영역을 지정하고, 그 안의 요소들을 넣게 된다. View 안에 여러 View들이 중첩되어 있을 수 있다. 웹으로 치면 div 같은 것. .. 2020. 5. 12.
React Native - 4. Android Studio 로 초기 앱 띄워보기 Android Studio 초기 설정 맨 처음 안드로이드 스튜디오를 설치하고 이 화면이 나온다. 오른쪽 하단의 Configure > SDK Manager를 클릭한다. 저기서 Android 9.+와 Android 9.0 버전의 SDK를 체크한 후 Apply를 누르면 다운로드가 진행된다. SDK Tools 에서도 다음 항목들을 클릭하고 설치해준다. 설치가 완료되면 Configure > AVD Manager를 눌러준 후 Create Virtual Device 버튼을 눌러준다. 플레이 스토어가 설치되어있는 디바이스를 선택한다. (편의를 위해) 선택 후 Finish를 누르면 다음과 같이 Virtual Device가 만들어져 있을 것이다. 시작 버튼을 누르면 다음과 같이 에뮬레이터가 시작된다. 앱 띄우기 에뮬레이터.. 2020. 5. 11.
React Native - 3. expo vs RN Cli & about RN React Native를 처음 시작할 때, 두가지 방식이 있다. 1. Expo CLI / Tool 을 이용하여 시작하기 2. React Native CLI 를 이용하여 시작하기 둘에는 다음과 같은 차이가 있다. Expo는 React Native의 무료로 사용할 수 있는 써드 파티 라이브러리로, 여러 Utility 덕분에 Native 기능을 손 쉽게 사용할 수 있는 반면 Expo에서 제공하는 Ecosystem에 제한되게 된다. 반면 RN에서 직접 제공하는 CLI는 Native 기능을 사용하기 위해 설정을 따로(많이) 해야하지만 자연스럽게 자유도는 높아진다. 물론 Expo로 시작하고, eject 명령어를 통해 RN Cli로 갈아탈 수 있다. Expo를 이용하여 앱을 개발할 때 , Expo Client 앱에서.. 2020. 5. 11.