KEEP CODING

expo에서는 쉬운 폰트 적용 방법을 제공하고 있다. 1. expo-font 모듈 다운로드 터미널에 명령어를 입력한다. npm install expo-font 2. expo-font 모듈을 import 한다 import * as Font from 'expo-font'; 3. custom font파일을 저장한다. assets/fonts 경로를 만들어 파일을 저장해둔다 4. font 가져오기 const getFonts = async () => { await Font.loadAsync({ Cafe24Dangdanghae: require("../assets/fonts/Cafe24Dangdanghae.ttf"), }); }; 내가 사용한 폰트 이름은 Cafe24Dangdanghae였다. Font.loadAsync..

TextInput을 통해 여러 값을 연속으로 입력받고 싶을 때 어떻게 해야될 지 몰라서 인터넷을 찾아보았다. blurOnSubmit TextInput 컴포넌트는 기본적으로 submit을 하고나면 blur처리된다. focus를 잃고 자판이 자동적으로 사라지는데, 그것을 막기 위해서는 blurOnSubmit 속성을 변경해주면 된다. 기본값은 true이며, blurOnSubmit={false}로 바꿔주면 된다. blurOnSubmit과 useRef를 같이 사용하면 다음 input으로 쉽게 넘어갈 수 있다. useRef javascript에서 특정 요소를 selector를 통해 선택했던 것 처럼, react에서도 특정 component를 가리킬 수 있다. useRef를 사용하면 가능하다. useRef 사용시 주..

로딩화면과 아이콘 설정은 app.json 파일에 있다. 아이콘은 asset/icon.png, splash이미지는 asset/splash.png로 설정되어 있다. 두 png파일과 동일한 크기의 png파일을 만들어 설정하면 된다. png파일의 이름을 icon.png, splash.png로 바꾸거나 json파일을 수정하면 된다. android의 경우는 asset/adaptive-icon.png으로 따로 설정되어 있으므로 빠뜨리지 않도록 신경써서 설정하자. *splash 화면 옆에 공백이 보이는 경우, "resizeMode": "cover"로 바꾸거나, "backgroundColor": 이미지배경색 으로 바꿔주면 된다.

AsyncStorage, AppLoading을 이용해 로컬에 자료를 저장/불러오고, 앱 로딩하면서 저장된 자료를 불러오도록 만들어본다. AsyncStorage AsyncStorage는 자료를 로컬에 저장하고 불러올 수 있도록 도와주는 API이다. https://docs.expo.dev/versions/latest/sdk/async-storage/ AsyncStorage - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev 사용하기 위해 터미널에서 다운받아준다. expo instal..

할일 목록이 많아져서 화면을 채웠을 때, 스크롤이 가능해야 모든 자료를 확인할 수 있다. 지금까지 잘 사용했던 View 컴포넌트는 내부 요소가 많아져도 스크롤 할 수 없다. ScrollView ScrollView는 요소가 많아지면 스크롤 할 수 있는 기능을 제공한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 import styled from "styled-components/native"; import Task from "./components/Task"; const List = styled.ScrollView` // flex와 width를 설정해 줘야 한다. flex: 1; width: ${({ width }) => width..

Expo로 앱을 만들 때 App.js에는 expo에서 제공하는 StatusBar를 사용해 기본 탬플릿을 만들어준다. 1 2 3 4 5 6 7 8 import { StatusBar } from 'expo-status-bar'; // ...생략 return ( ) Colored by Color Scripter cs 그런데 아래 내용을 만들다보면 Title이 상태바에 가려진 모습을 볼 수 있다. 이런 상황을 해결하기 위해 두 가지 방법을 사용할 수 있다. 1. 상위 컴포넌트의 스타일을 설정한다. 1 2 3 Colored by Color Scripter cs 상위에 View가 있다면, View의 style에 paddingTop을 설정하는 방법이다. OS가 Android일 때만 paddingTop을 설정하는데, ..

iOS를 사용하는 아이폰에서는 최근 몇년간 노치디자인의 핸드폰이 나오고 있다. 하지만 View를 사용해 만든 어플에서는 노치에 대응하지 못해 윗부분이 노치에 가려지는 경우가 발생한다. 왼쪽과 같이 노치 부분에 내용이 들어가게 된다. SafeViewArea 컴포넌트를 사용하면 위아래 공간에 여백을 만들어주어 내용이 겹치지 않도록 한다. View 대신 SafeViewArea를 사용하면 된다. iOS에서만 적용되며, Android에서는 View와 같은 모습을 보여준다. 참고한 사이트 https://www.codetd.com/en/article/6433019 React Native adapted IPhoneX series equipment - Code World SafeAreaViewThe aim is to r..

디자인 메인 화면에 날짜를 확인할 수 있고, 할일 목록에서 완료된 비율을 나타내는 바를 만들어 한 눈에 들어오도록 한다. 입력은 하단의 textInput에서 가능하다. 구현해야 할 기능 날짜 표시 휴일엔 색 다르게 표현 진행률 표시 todo 입력 아무런 값이 입력되지 않으면 할일 목록에 저장하지 않는다 todo 완료 다시 미완료로 수정할 수 있다 todo 수정 todo 삭제 저장(새로고침해도 남아있도록) 사용할 언어 React Native

Props Props를 이용해 스타일에 데이터를 전달해 그 값에 따라 스타일을 다르게 적용할 수 있다. 삼항연산자 사용가능 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 // input.js import React, { useState } from 'react'; import styled from "styled-components/native"; const StyledInput = styled.TextInput` padding: 10px; font-size: 20px; border: 1px solid ${({ text }) => (text ? "red" : "black")}; `; const Input = ({p..

Styled Component Javascript 파일 안에 style 코드를 작성할 수 있는 라이브러리. style이 적용된 component를 만드는 라이브러리이다. CSS에서 작성하듯이 style코드를 작성할 수 있다. (참고:기존 RN에서의 style 코드 작성 방법은 아래 참고) https://joylee-developer.tistory.com/146 React Native - style 적용하기 React Native에서는 여러가지 방법으로 스타일을 적용할 수 있다. 스타일 적용 방법 inline/StyleSheet 사용 두 가지가 가능한데, 여러가지 조합으로 적용할 수 있다. 1. inline 으로 적용하기 style={{ backgroun joylee-developer.tistory.com..