본문 바로가기

App/React Native25

[React Native] 5 React Navigation 설정 Font 불러오기 $ expo install expo-font font 가 로딩되면 화면이 렌더링 되도록 구성해봅시다. 폰트가 담긴 ttf 파일을 assets/fonts 에 넣어주고, 폰트를 불러옵니다. App.js import React, { useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import * as Font from 'expo-font'; import { AppLoading } from 'expo'; function fetchFonts() { Font.loadAsync({ 'open-sans': require('./as.. 2020. 5. 16.
[React Native] 4 반응형, 적응형 사용자 인터페이스 만들기 React Native 004 - Responsive, Adaptive User Interfaces 반응형, 적응형 사용자 인터페이스 자동적으로 모든 가능한 디바이스에 알맞은 모양으로 적용되도록 만들어 봅니다. 디바이스 차원, 방향(orientation)을 찾는 방법을 알아봅니다. 크기와 방향에 근거한 레이아웃 조정해봅니다. iOS 또는 Android 등 다른 디바이스 플랫폼을 구별하는 방법을 알아봅니다. 플랫폼 기반 적응형 코드 / UI 를 만들어봅니다. Dimension API width: '25%' 위와 같이 넓이를 정할 때는 퍼센트를 사용하는 것이 일관성있으며, minWidth, maxWidth 도 퍼센트로 지정하는 것이 좋습니다. 더 좋은 방법은 Dimensiion API를 사용하.. 2020. 5. 10.
[React Native] 3 Touchable, Modal Overlay React Native 003 - Basics 2 Touchable 컴포넌트 import { Touchable, TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, TouchableWithoutFeedback } from 'react-native'; 컴포넌트 안에도 onTouchEnd 등 다양한 속성이 많지만, 효과를 내는 조금 더 손쉬운 방법으로 react-native에서 컴포넌트를 직접가져오는 것을 추천합니다. TouchableOpacity : activeOpacity 등의 속성 지원 TouchableHighlight : underlayColor 등 속성 지원 TouchableNativeFeedback : Android 에서만.. 2020. 5. 7.
[React Native] 2 component, StyleSheet React Native 002 - Basics Core Components 리액트 네이티브에 빌드 → 리액트 네이티브에 의해 제공된 네이티브 UI 위젯으로 번역(translation) Styling CSS는 없음 Inline Styles, StyleSheet Objects (CSS 문법 기반이지만, 속성, 특징의 일부만 지원함) StyleSheet Objects를 권장 앱 구상 사소하지만, 그럼에도 불구하고 매우 중요하고 도움되는 앱을 제작해보겠습니다. 목표를 추가하는 버튼 구성, 목표 리스트 화면에 보여지고, 한 목표를 탭하면 삭제할 수 있도록 구현 중요 컴포넌트 텍스트를 작성하려면, 태그로 텍스트를 꼭 감싸주어야 함. : 텍스트, 이미지, 유저 인풋에 대한 응답 등에 사용되는 스크린 위의 작은 네모 .. 2020. 5. 7.
[React Native] 1 React Native 시작, Expo React Native 001 1 React Native(RN) 란? React.js React Native 사용자 인터페이스 build를 위한 JavaScript 라이브러리 특별한 React 컴포넌트의 집합 웹 개발에 주로 사용됨 컴포넌트는 Native 위젯으로 컴파일됨 ReactDOM.render() 은 추가로 웹지원이 가능 Native 플랫폼 API는 JavaScript를 노출함 React 자체는 플랫폼-agnostic함(그 자체로 쉽게 배울 수 있음) Javascript와 Native 플랫폼 코드를 연결함. React.js + React Native = 실제 Native Mobile 앱(iOS, Android) React Native 동작 원리 HTML 을 번역할 수는 없고, , 등의 태그를 이용.. 2020. 5. 5.
728x90