ReactNative
[react native] AppIcon, splashScreen - 2부 icon 적용하기
개요 1부에 이어 icon을 react native에서 적용하는 방법을 설명합니다. [react native] AppIcon, splashScreen - 1부 이미지 만들기 개요 AppIcon과 SplashScreen 이미지 부터 ReactNative에 적용하기까지의 과정을 작성했다. 1 부에서는 이미지를 만드는 방법, 2부에서는 아이콘 적용 방법, 3부에서는 SplashScreen 적용 방법을 작성 할 예정 taehoon95.tistory.com 안드로이드 아이콘, 앱 스크린 집어넣기 안드로이드 아이콘 생성 사이트에서 다운로드한 아이콘들을 react-native 내 안드로이드 폴더에 덮어씌워주기만 하면 끝난다. 아래처럼 다운로드받은 파일들을 해당 프로젝트 /android/app/src/main/res ..
[react native] AppIcon, splashScreen - 1부 이미지 만들기
개요 AppIcon과 SplashScreen 이미지 부터 ReactNative에 적용하기까지의 과정을 작성했다. 1 부에서는 이미지를 만드는 방법, 2부에서는 아이콘 적용 방법, 3부에서는 SplashScreen 적용 방법을 작성 할 예정이다. 설치 App Icon을 만들기 위해 아래사이트와 Figma라는 툴을 사용 할 예정이다. 안드로이드 아이콘 생성 사이트 Android Asset Studio - Launcher icon generator romannurik.github.io IOS 아이콘 생성 사이트 App Icon Generator Generate icons and images for mobile apps, android and iOS. No need to upload or download. Wo..
[React Native] PickerSelect 사용하기 (picker)
개요 앱에서 picker는 사용자의 입력값을 개발자가 제시함으로써 입력에 대한 오류를 줄일 수 있는 방법입니다. picker 라이브러리 사용법에 대해 정리하였습니다. picker 설치 https://github.com/lawnstarter/react-native-picker-select lawnstarter/react-native-picker-select 🔽 A Picker component for React Native which emulates the native interfaces for iOS and Android - lawnstarter/react-native-picker-select github.com npm install react-native-picker-select # React Nati..
[React Native] PickerSelect 사용하기 (datepicker)
개요 앱에서 picker는 사용자의 입력값을 개발자가 제시함으로써 입력에 대한 오류를 줄일 수 있는 방법입니다. 저는 개인 프로젝트를 진행하면서 2가지의 PickerSelect가 필요했습니다. 이 블로그에서는 그 중 하나인 datepicker을 modal로 띄우는 라이브러리에 대해 정리하였습니다. 1. datepicker 2. picker 설치 처음엔 @react-native-community/datetimepicker 를 사용하고자 했는데, modal로 표현하기가 어려워 react-native-modal-datetime-picker를 사용하게되었습니다. https://github.com/mmazzarolo/react-native-modal-datetime-picker mmazzarolo/react-na..
React Native M1 설정하기
개요 dev.to/amanhimself/setup-macbook-m1-for-web-and-react-native-development-8la Setup Macbook M1 for Web and React Native development I recently upgraded from Macbook Air 2017 to Macbook Pro with an M1 chip. My four year old Macbook Ai... dev.to M1을 구입 후 React Native를 위 주소를 참고로 경험한 부분, 번역 및 조사 위주로 작성하였습니다. Rosetta 2 Rosetta2 는 x86 ARM 기반 칩에서 아키텍처를 사용하는 Intel 기반 칩용으로 설계된 앱을 위한 프로세스 입니다. M1에 사전 설치..
개발 일지 2021.3. 4 (도입 화면 구성하기)
막상 TextInput 위주로 뷰를 작성하면서 생각보다 할게 많다고 느껴졌다. Component의 구성문제도 그렇고 picker 창을 띄우기 위해 라이브러리를 썼는데 잘 안되서 시간을 많이 소모한 것 같다.
개발 일지 2021.3. 2 (디자인 시스템)
Figma에 작성한 내용을 옮기기 위해 다음과 같이 변경했다. 그림자 설정 값의 경우 아래 사이트를 참고하였다. ethercreative.github.io/react-native-shadow-generator/ React Native Shadow Generator ethercreative.github.io 1. Color 변경 export const COLORS = { // default font color font: "#000000", // base colors primary: "#99E1D9", secondary: "#FFFAE3", tertiary: "#F7567C", // non-colors black: "#000020", white: "#FFFFFF", // color variations gra..
개발 일지 2021.3.1 (디자인 시스템)
What is the most flexible design system for react-native? Adopt a design system for your style in minutes. medium.com Design Systems in React Native Design System helps development teams build products which are consistent in terms of appearance. Check how to implement them in your React Native project. www.netguru.com Figma를 통해 디자인 가이드를 완성 하였는데, ReactNative에서 어떻게 표현을 해야 할지 고민을 하던 도중 위 블로그를 찾게 되..