본문 바로가기

rn4

[React Native] 사용자가 글 수정, 삭제 React Native 105 - 사용자가 글 수정, 삭제 userProductsScreenj.js 사용자가 들어가서 상품을 수정하고 삭제하는 화면이다. 왼쪽에 DrawerNavigator로 이동할 수 있도록 만들어 놓았다. useCallback useCallback 은 함수를 재사용하고 싶을 때 사용한다. 이 때 함수 안에서 사용하는 props가 있다면 deps 배열 안에 꼭 추가 해주어야 한다. 이로써 props 가 가장 최신 상태에 있는 것을 useCallback안의 함수가 사용할 수 있게 된다. useEffect useEffect 는 상태가 변화될 때, 특정 함수를 실행시킨다. useEffect 의 두 번째 파라미터 deps에 함수를 넣을 수 있다. deps 에 특정 값을 넣게 된다면, 컴포넌트가.. 2020. 12. 15.
[Reactive Native] 주문 하기 만들기 React Native 104 - 주문하기 장바구니에 담은 목록을 주문화면으로 가져와 본다. models/orders.js class Order { constructor(id, items, totalAmount, date) { this.id = id; this.items = items; this.totalAmount = totalAmount; this.date = date; } get readableDate() { return this.date.toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '.. 2020. 12. 8.
[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] 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.
728x90